I have the following website:
www.thewhozoo.com
When viewed from a screen with a width of more than 1240px, it displays the images side by side. With a screen below 1240px (e.g. mobile phone), it displays the images beneath each other. This is achieved using:
#media only screen and (max-width: 1240px) {
This all works fine.
My problem however is with the background image:
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When the browser is wide enough (e.g. 930px here), it displays:
But with a narrower browser (e.g. 480px here) or a mobile device, it displays:
As you can see, in the image, the background work "WORK" gets chopped off in the second screen.
Question
Is it possible in css, to set a minimum width, so that the word "WORK" will always be visible, no matter the size of the browser?
This will give smaller browsers the effect as if they are viewing the page from further away (zoomed out).
Thank you.
The background-size: cover setting makes sure the whole element is always filled by the background images. In your case, the mobile version displays the complete height of the image and centers it horizontally, this way cutting something off at the left and right. If you would display it smaller (which would be necessary to see the whole word "work"), the height would shrink too, and the image wouldn't fill the window anymore.
You can try background-size: contain instead, which will always display the whole image, but will leave empty space on either top and bottom or left and right, depending on the orientation. But combined with a background color, this might be something you can live with.
Try background-size: 100% 100%, or background-size: 100%
Hope this helps!
What you can do is make two copies of the background image, when the browser is resized to the minimum width you can use javascript(jquery) to swap the background image from large to small version.
Or you can style the background like:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Related
so I want to make an image(2988 x 2988) as my background I tried this code as my css
body {
background-image: url(images/nicholas-kwok-225380-unsplash.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
}
and please look at the picture to understand what I am talking about guys
Thank you !
body {
background-image: url('images/nicholas-kwok-225380-unsplash.jpg');
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#464646;
margin:0; /* 1 */
width:100%; /* 2 */
min-height:100vh; /* 3 */
height:auto; /* 4 */
}
1: As described in comments the Body HTML element often has a default margin value (0.5rem) which means it can't naturally cover the screen size entirely.
2: Set the image to scale to the size of the body.
3: Set the body to be a minimum height of the entire screen viewport height. So if the body contents is less than the screen size you still see the full body background image.
4: A fix for some browsers (IE / Edge) that will not accept min-height values being set without a height value also being set.
As a significant but side issue: your image size (2988px x 2988px) is HUGE and deeply impractical for 95% of your website viewers. You should either consider reducing your image size to something more usual (~1800px) and/or using some sort of image optimisation tool to radically reduce the filesize.
Image files will need to be downloaded by the client so a ~400Kb image (for example) loading on a ~12Kb webpage will be a big burden for your server to serve and will be slow for the client browser to get and load into memory.
I would recommend reducing the image pixel dimensions and running it through an optimiser tool .
OR
You should use media queries in the CSS so that you only need to load the largest image for the current client screen width. A user on a 480px screen has no need for a 2988px width image.
IF you load a very large image into a small screen space, the browser will firstly download the whole image (wasting above 90% of the data) and will then badly/quickly rescale the image to fit the screen -- making it look worse than it actually is by using a fast but imprecise scaling algorithm.
Update:
To show the full picture in the background regardless of screen size, you want to change cover to contain thus:
background-size: contain;
Do you want to keep the aspect ratio or you just want it to fill the whole space?
#shomz , I want it to fill the whole space (screen) !
Based on the comment above, a simple:
background-size: 100% 100%;
should do. This will always stretch the image to fill your screen.
See here:
body {
background-image: url(https://www.picpng.com/images/large/hat-male-man-person-silhouette-transparent-95008);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
background-color:#464646;
}
I've got a div with a background image I'm using for a hero image on my website. On my external monitor it fits perfectly and displays correctly.
When I drag the window over to my laptop display the background image is shifted over to the right. I've tried setting background size to cover but this just makes the image repeat.
The div is set to the width and height of the image (1920 x 600) and both screens are set to 1920x1080 resolution.
Is it because my laptop screen has a higher dpi? What should I change to get the image to display correctly on both screens? Would I need to have more than one image?
Edit:
Here's how it looks on my external monitor (correct)
And here's how it looks on the laptop (when i did the screen grab it was actually bigger than the original image size?)
Here's my CSS for the div
.hero-image {
background-color: #679da7;
background-image: url("../images/hero-image.png");
height: 600px;
}
Using background-size: contain / cover doesn't help, it just makes the image repeat on my laptop screen.
Edit 2:
Joe's solution worked. After a bit more googling it seems that despite my laptop display saying it's 1920 x 1080, it's actually only 1535px wide, which is why the image wasn't displaying correctly (it's wider than the screen) - facepalm
Thanks for the help guys.
You should use
background-size: cover;
background-repeat: no-repeat;
on your background-image.
You need to set the position and repeat rules:
background-position: right;
background-repeat: no-repeat;
What is the resolution of your monitor and laptop ?
you can use
background-size : 100% 100%;
background-repeat: no-repeat;
on your div background
Use CSS3's background-size so that the image always fits in any container without being stretched.
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: no-repeat;
In using background size property, make sure that you set your background image property like this:
background-image: url('path/to/img');
instead of
background: url('path/to/img');
Depending on the wanted result (not clear in question) you can do two ways.
1) This will keep the image within the div, if the height is heigher than the div, It will leave a empty space there, use a background-color to see it more clear
background-size: contain;
background-repeat: no-repeat;
2) this will always cover the full width and height of the div
background-size: cover;
background-repeat: no-repeat;
Joe's comment on my question worked. I also found out my laptop screen is only 1535 wide despite being at a resolution of 1920.
Thanks all.
Kind of weird title, but couldn't think of better way to word it.
Basically I'm working on a website, and I want to use an asset I made in photoshop for a navbar that looks like a leather suitcase/belt background. Issue is, if I stretch it too far, it won't fit the screen. Basically if I use the CSS background-size: cover; background-repeat: no-repeat; property, it looks something like this
It fits nicely on the 100% width of the element, but as you can see, the image is clipped because it's not 100px as I want it to be.
If I used background-size: contain; background-repeat: repeat-x; properties my image would obviously fit nicely when it comes to height, but since it's not a seamless texture it doesn't clip properly horizontally. As seen on the image below:
Which looks pretty weird as you can see. Last but not least I tried using the 50% 50% trick - background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;, which kind of worked but i still have a problem with it not fitting vertically (the edges are being cut off), as you can see here:
So I'm asking if there's a way to fit the image properly with CSS that I'm missing. Alternatively the second image i posted with repeat-x, however if there would be a way to check (probably with javascript/jquery) that once the image doesn't fit (ala second image), it needs to be flipped horizontally with scaleX so the edges fit, or should I simply downscale the image in photoshop? Thanks for your advice.
Have you tried :
background-size: (100% 100%);
Try using viewport to give the element width in accordance with the screen width (100vw = 100% browser width).
.nav-belt {
width: 100vw;
height: 100%;
}
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
I want to use this kind of image for my background.
http://www.wallpaperpin.com/xres/1920x1440-download-free-awesome-psd-designs-website-backgrounds.jpg
How can I make it look "centered" (I mean the light rays to be displayed as if they are in the middle of the site) using css on any screen resolution it will be browsed? I mean to be displayed in the same way both on 1440x1050 or 1920x1080 or on any mobile device.
Do I have to find other pictures with other resolutions to be displayed depending on the visitor's resolution? Will that require php-script?
body{
background: url("imageurl.jpg") center center;
}
If you want it to scale to the browser resolution, you can also use
background-size: cover;
background : url('images/background.jpg') top center no-repeat
background-size : 100%;
making it top center rather than center center makes it from the top... (Duh) and background-size: 100% makes the image the size of the browser window.