CODEWITHSUNDEEP
css
Thami sithole
Thami sithole

Reputation: 3

background image not appearing properly in my mobile browser

i have a problem with an image in my website it does not appear properly in browsers the picture cuts certain areas in mobile browser

this are the images desktop pc screen image image on a mobile browser

this is the code for the image

section#landing {
width: 100%;
height: 100vh;
background: url('../../img/bg.jpg');
background-size: cover;

background-position: center;
background-attachment: scroll;

}

@media only screen and (max-device-width: 320px) {

}

Upvotes: 0

Views: 47

Answers (2)

Mihai T
Mihai T

Reputation: 17687

see here jsfiddle

do not use cover because that makes the image to be cropped instead use contain also add background-position:top center because with contain the img resizes and the empty spaces ( top and bottom ) are filled with the background-color which in your case is transparent . so it's better to align the bck img to top and fill the bottom area with whatever you want

you can with media query set the background-size:cover on pc and contain on mobile

code :

section#landing {
   width: 100%;
   height: 100vh;
   background: url('https://i.sstatic.net/fXmkE.jpg');
   background-size: contain;
   background-repeat:no-repeat;
   background-position: top center;
   background-attachment: scroll;

}

Upvotes: 0

Quentin
Quentin

Reputation: 943220

Step 1: Look up the code you are using to see what it is supposed to do:

cover A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Well, it is clipping the image, and you don't want it to clip the image, so clearly cover is wrong.

Step 2: Look at the other options:

contain A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.

That might do the job.

<percentage> A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. The background positioning area is, by default, the area containing the content of the box and its padding; the area may also be changed to just the content or to the area containing borders, padding, and content. If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. Negative percentages are not allowed.

… or that (with 100% 100%), depending on what you actually want:

Upvotes: 1

Related Questions