Jump to content

How to have a good background image


newcoder1010

Recommended Posts

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

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

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 by newcoder1010
Link to comment
Share on other sites

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

  • 3 weeks later...

    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

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

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

  • 3 weeks later...

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...