Alright, I'm trying to make my background image extend across the width of the entire screen, and same with the white background below it. Can someone tell me the easiest way of making this possible? Here's my site:
http://dl.dropbox.com/u/20517056/jimedit2.html
http://dl.dropbox.com/u/20517056/jimedit2.css
Here is the CSS:
I basically just want the blue background to extend across the whole page, and the white background below it to extend with it as well. Thank you!
#lightblue {
background: url(jimedit2media/lightblue.gif); /* remove the no-repeat */
visibility: visible;
position: fixed;
left: 0px;
top: 0px;
z-index: 0; /* set z-index to 0 */
width: 100%; /* change this to 100% */
height: 100%; /* change this to 100% */
}
Related
Good day.
I want to set a background with gifs on the site.
The problem is that the gif itself has a white background and therefore the entire site becomes the same white.
Is there some way to eliminate this white background.
The problem is that it overlays on top of everything except the header, which has a z-index of 10. Although I set for a background with noise z-index: -1
html
<div class="noise-bg"></div>
I use a div and size it to the full width of the screen and also give it position: fixed
css
.noise-bg
position: fixed
width: 200%
height: 200%
top: -50%
left: -50%
background: url('../images/general/noise.gif')
background-size: 1.8%
pointer-events: none
z-index: -1
opacity: 16%
GIF
Simply add the class to the html tag:
<html class="noise-bg">
And the CSS something like:
.noise-bg {
background: white url("https://i.stack.imgur.com/dzzC1.gif") left top/1.8% 1.8% repeat;
}
Or style directly the html tag:
html {
background: white url("https://i.stack.imgur.com/dzzC1.gif") left top/1.8% 1.8% repeat;
}
I'm trying to create a section layout where I just want only half of my image to be shown in the bottom, right-hand corner of the section. I can adjust the position and size of the background, but when I start resizing the window, the image either disappears, or moves from where I actually wanted it to be. I basically just want the layout to be responsive. I can't use px values for the background position, because when I adjust the window even slightly, the background photo looks terribly misplaced.
My code (you need to fullscreen the code snippet to see what I kind of want it to look like):
html, body {
height: 100vh;
width: 100vw;
margin: 0;
}
.one {
background: url("https://images.pexels.com/photos/45889/camera-photo-camera-sony-alpha-7-sony-45889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat 130% 110%/300px;
height: 100vh;
}
.two {
background: #f3f3f3
}
<section class="one">
<header>First Section</header>
</section>
<section class="two">
<header>Second Section</header>
</section>
Any help would be appreciated. Or if this isn't possible. I also tried using Transform, which didn't work out well either.
Codepen
Try with position: fixed; and play with top: and left: values.
Edit: With responsive positions in any elelment use % in size ;)
Eg.
.one {
position: fixed;
top: 50%;
left: 50%;
background: url("https://images.pexels.com/photos/45889/camera-photo-camera-sony-alpha-7-sony-45889.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940") no-repeat 130% 110%/300px;
height: 100vh;
}
Hope this can help you ;)
I want a fullwidth background (with horizontal scroll) for a project that I'm working on at the moment.
I've added the following code to set the background:
.street {
position: absolute;
top: 0;
left: 50%;
background: url('../img/street.svg') no-repeat left;
background-size: cover;
width: 100%;
height: 100%;
z-index: -2;
}
That works, but then I've had a new problem, because of the background-size: cover the image only shows a part of it.
The user has to scroll horizontally, so that he or she can see the whole street image. My question is: How van I fix that? (I've already searched on the internet and maybe it is a really simple solution, so sorry for asking :))
What I have so far
Thanks!
use, background-size: 100% 100%; this will fill your entire DIV with complete image.
.street {
position: absolute;
top: 0;
left: 50%;
background: url('../img/street.svg') no-repeat left;
background-size: 100% 100%;
width: 100%;
height: 100%;
z-index: -2;
}
Here is the difference:
Percentage: Sets the width and height of the background image in percent of the parent element. The first value sets the width, the
second value sets the height. If only one value is given, the second
is set to "auto".
Cover: Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit
off one of the edges.
Contain: Resize the background image to make sure the image is fully visible
Here is a good explanation for the same
I have an SVG image and it just doesn't display the way I want.
This is the CSS code I'm using :
.container-background {
min-height: 25vh;
background-image: url("svg-image.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border-bottom: 1px solid #e9e9e9;
I also tried object fit contain / cover / every other option. I just can't get it to display right. I need it to cover the whole container.
Any ideas how to achieve this ? I ran out of options.
Try setting background-size:contain, min-height:100vh and background-size:50% (you can remove background size if you like or adjust the percentage to get it covering just right for your design).
.container-background {
min-height: 100vh;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/0/09/America_Online_logo.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
background-size: 50%; // remove this or tweak to ajust the fill amount
border-bottom: 1px solid #e9e9e9;
}
jsfiddle: https://jsfiddle.net/so099hnt/1/
Your CSS is functioning correctly, cover takes up 100% of the space maintaining the aspect ratio of the image so any excess gets cut off.
Background contain
If you would like to display the whole image then you should be using contain.
Fiddle
https://jsfiddle.net/7uca5x64/1/
Stretched background using inline image
If you would like it to take up 100% of the width and height without keeping it's aspect ratio then add it in as an inline image, but this would require a format other than SVG. You could then use absolute or fixed positioning to make it look like a background image.
img {
height: 100%;
width: 150%;
position: absolute;
left: -20%;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/5/
Stretched background using inline SVG
If you have to use SVG, you will have to inline it into the HTML and then you can control it via CSS. You will also have to add preserveAspectRatio="none" to the SVG.
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
}
Fiddle
https://jsfiddle.net/7uca5x64/6/
I'd like to set a webpage background image to scale with the browser window so that it never loses its original aspect ratio (becomes stretched), and so that the image itself stays basically centered. After the window reaches a small enough size, I want the image to overflow (disappear) on both the left and right sides, not just the right side, as it does by default if the image is absolutely positioned.
Here is an example of what I'm doing right now: http://jsfiddle.net/S59EW/2/
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
}
(The image has to be within a div positioned absolutely because of some javascript I'm using that applies to it.)
If you resize the jsfiddle window you'll see that the image keeps its aspect ratio only if you don't make the window too tall. Then the image is stretched vertically.
And if you remove "height: auto" you get the same thing except the image stops resizing after a certain point and disappears on the right/bottom sides but not on the top/left sides.
#background img {
position: absolute;
min-height:100%;
width: 100%;
top: 0;
left: 0;
}
So, I need:
The background image to always occupy the entire window without scrollbars.
The image to always keep aspect ratio.
The image to overflow onto the left and right side after a certain browser size threshold, so that it remains basically centered.
Thanks everyone
You can set the div background through the CSS, that way the image will fill the div and the sides will cutoff when the div is resized smaller. This code will center the image within the div and cutoff at the edges when shrunken down:
HTML:
<div id="background"></div>
CSS:
#background {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(http://2.bp.blogspot.com/-ayEwJpMGTPQ/USqliwPWo1I/AAAAAAAAHtI/ab6NHVy0Q48/s1600/tree.jpg) no-repeat center center;
-webkit-background-size: cover; /* Add in these */
-moz-background-size: cover; /* four lines to */
-o-background-size: cover; /* remove the white space*/
background-size: cover; /* around images */
}
JSFiddle
and full screen JSFiddle
Updated JSFiddle with background-size property included to remove white space
Updated full screen version
Updated with slideshow
Updated fullscreen with slideshow
You may need to play with the aspect ratio of the background photos in order to get the look you want.
I have these two options, one is CSS only but it would need media queries at a small width.
Here is the background image JSFIDDLE, in this one it will scale exactly how you want it.
Finally, drum roll please, if you need the image to be a tag its self and act this way well there is a FIDDLE for that. :p
First CSS,
#background img {
position: absolute;
min-height:100%;
width: 100%;
height: auto;
margin-top: -40%;
top: 50%;
left: 0;
}
#media only screen and (max-width: 1700px) {
#background img {
margin-top: 0;
top: 0;
}
}