newcoder1010 Posted March 24, 2017 Share Posted March 24, 2017 Hello, I have a background image under the class buyer_form. On top of the image, I have two blocks. Would that be possible if you visit my page and provide me some styling recommendation of the background image? Currently, I am displaying the entire image. I feel that Image can be improved by applying some styling. I am trying to improve the styling by keeping the same dimension. Simply asking for recommendation and css code to improve it. Thanks. Link to comment Share on other sites More sharing options...
Ingolme Posted March 25, 2017 Share Posted March 25, 2017 The best option would be to set the background size to "cover" rather than 100% 100%. You shouldn't ever change the aspect ratio of an image, it looks bad. You can read about the possible background-size values here: https://www.w3schools.com/cssref/css3_pr_background-size.asp Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 25, 2017 Author Share Posted March 25, 2017 (edited) I changed to cover. It looks better. Thank you. Now I mainly see the trees. House is truncated. I saw other options from the link you gave me. I am not sure how I can include the house and then truncate trees? Please advise. Edited March 25, 2017 by newcoder1010 Link to comment Share on other sites More sharing options...
dsonesuk Posted March 25, 2017 Share Posted March 25, 2017 That would mean you will have to adjust the background image container height to give it same aspect ratio, otherwise you would have same distorted image you experienced using 100% 100%; OR using graphics program, create same aspect ratio canvas, place image in it to fill total height, then stretch trees at sides to fill remaining space, the house will be normal, but trees depending on how good you are might be odd looking, but the main important house proportions will be OK!. Link to comment Share on other sites More sharing options...
Ingolme Posted March 25, 2017 Share Posted March 25, 2017 You can adjust which part of the image shows up using background-position. I find setting background-position: 0 100%; does a good job. Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 25, 2017 Author Share Posted March 25, 2017 (edited) Looks very nice with cover and background-position: 0 100%; Thank you so much for your help. Edited March 25, 2017 by newcoder1010 Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 14, 2017 Author Share Posted April 14, 2017 I have another image field. I tried to apply the similar css like you did above but it is not doing anything. I think it would be better if I could take middle section of the original image. So if the original image height is 500px I would like to keep from 50px to 400px that means top 100px and bottom 50px wont display. Please advise. <div class="views-field views-field-field-img"> <div class="field-content"><img typeof="foaf:Image" class="img-responsive" src="mountain.jpg" width="1350" height="550" alt=""></div> </div> CSS .img-responsive { display: block; height: auto; /* max-width: 100%; */ width: 100%; /* background-repeat: no-repeat; */ background-size: cover; background-position: 0 100%; } Link to comment Share on other sites More sharing options...
dsonesuk Posted April 14, 2017 Share Posted April 14, 2017 You can't use a img element to have a background image, and you cannot use background properties on a img element, it is a void element, it does not have a closing element like a div element. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 14, 2017 Share Posted April 14, 2017 You can give field-content a max-height of 350px, with overflow: hidden; then set height of img to max-height: or height: of 500px and use negative top margin of 100px; IF that is what you mean? Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 14, 2017 Author Share Posted April 14, 2017 First of all I would like to thank you for helping me. Second, i dont even know exactly what I am trying to do. I have slideshow on this page. First image i got it from online and image does not look right. So, I have been playing around to make all images look better but I failed to do so. So, at this point I would ask for your recommendation. My page. Link to comment Share on other sites More sharing options...
dsonesuk Posted April 14, 2017 Share Posted April 14, 2017 The best option would be choose the best proportional size of slideshow image that would suit you needs, then make all the images the same size, by using a image editor and expand/reduce proportionally until the image until it fills that specific size canvas to all 4 edges, which will probably mean any part of the image extending beyond these edges will be lost. Like reducing a square image into a rectangular canvas, you will lose top and bottom edge of square as they will be clipped to fit the rectangle. Link to comment Share on other sites More sharing options...
newcoder1010 Posted April 14, 2017 Author Share Posted April 14, 2017 I will have to research and need to play around for that. I will let you know. For now, can you please help me with some css at least to make it somewhat better (mainly the first image)? Link to comment Share on other sites More sharing options...
newcoder1010 Posted May 4, 2017 Author Share Posted May 4, 2017 I created 5 images using Paint. All images have same dimension: Width:1750px. Height:750px. I can see the images in desktop just fine. As I am making the screen smaller, I see that height is getting smaller and smaller. Once I get to mobile screen sizes, height becomes around 350px for images. I did not give this height. Images dont look as good as desktop sizes. Yes, I can create 3 separate blocks. One for desktop, one for laptop, one for mobile. Each will have separate image dimension. This route requires a lot of work. Ideal solution would be to use one block responsive for all devices. Again, images are responsive but dont look as good as desktop. When I inspect, I see this css: .img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto; } I can simply change the height to desired height for mobile and tablet but it does not look good. I thought it would be helpful if I could display proportionally like truncate 10% around the images. I am just lost. Thanks. Link to comment Share on other sites More sharing options...
dsonesuk Posted May 4, 2017 Share Posted May 4, 2017 For it to be responsive width wise, and have a height of 350px, proportionality the device width would be approx 820px wide, that is not mobile that is more like tablet device size? These images are massive, not ideal for mobile. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now