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.
Related
I have added a background image to my header and it looks great at smaller size but I lose the full image at larger size. here is the code I have so far
.fusion-top-header .fusion-header {
background-image: url("http://127.0.0.1/OTG/wp-content/uploads/2020/01/sunset_background.jpg")!important;
background-size: cover;
background-repeat: none;
background-position: center center;
}
I want all screen size to have the image look like what it is in the small screen one. I have the logo and menu moving and adjusting for screen size just not the image
Any help would be great.
Thanks
Problem is this:
When you enlarge your screen height of your element .fusion-header remains the same. Since background-size is cover your image is trying to be full width, hence automatically gaining height.
You have option to set background-size to contain and background-position center, or you have option to adjust your .fusion-header height via vw/vh units.
As far as I know I can' t say that there is anything else.
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;
}
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;
The best example of what I need would be the picture behind the search bar on http://shutterstock.com. Try to unzoom (ctrl and - on Chrome) ; the rest of the website will size down; the image itself will remain the same size, it will only be cropped as its height decreases.
Basically, I need the background image to be responsive and full width on an otherwise unresponsive and 960px theme.
It's giving me a bad headache so far; I can't figure out how to do it.
Any ideas?
I think you're looking for background-size. FYI, this doesn't work in IE8 and below I believe.
.your-class {
background:url('images/yourimage.jpg');
background-size:cover;
}
body {
background-image: url(blah.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
'cover' will make the background image rescale based on the container's size
'fix' will make the background image positton stay fixed when u scroll down
I'm displaying some images as backgrounds on a webpage but the image isn't displaying entirely 'zoomed out'. Instead, it's taking just the left side for example.
How can I make the image display completely? Is it to do with the resolution?
#kitchenimage{
width:100%;
background: url("siteimages/kitchenimage.jpg") no-repeat center fixed;
padding:200px 0;
}
The image is 3249 x 1679.
Thanks.
Depending on which option prefer, define one of the following:
background-size: cover;
background-size: 100% 100%;
background-size: contain;
The first will scale the background image to be as large as possible so that the background area is completely covered by the background image, leaving some parts of the background cropped while keeping aspect ratio.
The second won't keep the aspect ratio and will cover the background without any cropping.
The third will scale the image to the largest size such that both its width and its height can fit inside the background area.