I am making a website and want my front page to have a photo that covers the entire background. I have searched and searched but I can't get my image to fit the screen, it automatically zooms in! I have attached an image of what it looks like, the picture is of a pier and all that shows is a zoomed in corner of the pic. Anyone got any tips?
You can use
background-repeat: no-repeat;
background-size: cover;
You can use this CSS
html {
background: url(example.jpg) no-repeat center center fixed;
}
Related
I am quite new in HTML programming, so I try new things out every time. Now I got to a little problem and I would need your help.
I have a .png picture in the background of my HTML-file. And if I make the size of the screen smaller, the picture cuts of on the sides.
background: url(img/Website_Background.png) no-repeat center center fixed;
background-size: cover;
So here my question, how is it possible, that the the middle part of the picture goes away (size of the picture is going to be smaller out of the middle), so that the part on the right and left side stays.
Hopefully my description was understandable.
Thanks for all your help.
background-image: url("img/Website_Background.png");
background-size: cover;
position: relative;
You should be good.
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 need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
So I've seen other people posting about similar problems and I've tried their solutions but none of them have worked.
On desktop, the header background image works perfectly. Even when I resize the window to that of a mobile size, it works. But when I load it on an actual mobile device, the background image doesn't show up. I've discovered that if I remove the background-position: center center;, the background image does show up on mobile, but it's distorted.
So, my question is: how can I make the background image show up on mobile without it looking distorted.
My CSS for the header container in question is:
header {
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-image: url(../img/header-background.jpg);
position: relative;
}
You can see it in action at: http://coledavidson103.github.io/davidsoncreative/.
Again, the problem only presents itself on a mobile device. It doesn't even happen when I use Inspector to emulate a mobile device.
Thanks in advance!
EDIT:
Here is a screenshot of the problem when I include background-position: center center. You'll notice that the image doesn't show up.
Here is a screenshot of the problem with background-position is not included. You'll notice the image is distorted.
change background-size: cover to background-size:100% 100%.
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.