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;
}
Related
I want to create background-image full-screen in HTML, and CSS I have set all properties for background image.
This is my background-image on folder.[![enter image description here][1]][1]
I try to do this.
<style>
* {
margin: 0;
padding: 0;
}
.background-image {
background-image: url("https://via.placeholder.com/100.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100%;
}
</style>
<body>
<div class="background-image"></div>
</body>
But I don't want the background-image on the top to hidden or cut, I want to display all background-image full-screen. As you can see, missing the text above. Any idea how to fix this?
You could use background-size: contain instead of cover. That way the image will expand to fill the avialable space but will not be cut. This will leave empty spaces around the image.
If you want to have the gradient background to fill the whole area (so you don't have empty spaces) you could use 2 backgrounds:
one with the gradient with background-size: cover
one where you cut out the subject of the picture (with Photoshop or a similar program) and with background-size: contain
Edit:
I made an example with a css gradient. The kitten should be the subject. I gave it at fixed height (400px) in stead of contain, but on smaller screens it will cut the kitty. If you don't want sliced kitten, you can change the 400px in the example below to contain.
#full-screen {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background:
center / 400px url(https://placekitten.com/400/400) no-repeat,
radial-gradient(#e66465, #9198e5);
}
<body>
<div id="full-screen">
</div>
</body>
For more technical details and options you can consult the documentation at developer.mozilla.org, that's a great resource:
https://developer.mozilla.org/en-US/docs/Web/CSS/background
https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient()
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 a Django project and I want to add a background image to the HTML template. I have the following code:
<body class="standard-background-color standard-font-family" background="{% static '/images/background1.jpg' %}">
It displays the original size which is 5300 X 3100 or something like that. I want to change the image size for the background image but when I apply css to the body tag the images size is not changing. How can I change the image size to 1920 x 1080...
As Radiant Ahmed pointed out in his comment, if you want a background with opacity then it should be another div
With that in mind, you can use a pseudo element to create the background image container.
Also there is no need to resize the actual image in Photoshop to fit the screen (though it's kinda huge), use background-size: cover instead.
How background-size property works MDN
div {
width: 200px;
height: 200px;
background: red;
}
body::after {
content: '';
background: url('https://fillmurray.com/500/500');
background-size: cover;
opacity: 0.5;
position: absolute;
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div>
<p>Yo! I'm the content!<p>
</div>
Correct me if I'm wrong, but I'm assuming that you are trying to set the size for the background image for html which is unaffected by the CSS for body.
In that case, just add !important after what briancaffey said so that it doesn't get overridden by other CSS:
html {
background-repeat: no-repeat !important;
background-attachment: fixed !important;
background-position: center !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
It's not recommendable to set a background size of 1920x1080, because people have different viewport sizes, so it's more practical to adjust the size to their viewport using background-size: cover.
I have done a bit of googling and can't way a way to stop my background images overlapping. What I'm trying to do is have a div with a faded background. But when the fade reachs full opacity I want to apply a different background image that can repeat so the div looks flawless no matter how long the div is.
I have thought about just applying full length images for each web page but I would rather have this working so I don't need to worry about how much content I can apply to each page.
#content_holder{
width:800px;
height:1000px;
background-image:url(../images/PC/content_top.png),url(../images/PC/content_bottom.png);
background-position:0 0,0 240px;
background-repeat:no-repeat,repeat-y;
}
Added note: the height says 1000px, this is purely for testing purposes as the div is empty at the moment.
The second image does repeat but starts form the top of the div overlapping the other image.
these are the images:
content-top.png show once
content-bottom.png repeat after content-top
Whats happening:
What about just removing background-position and adjust the background-repeat:
background-repeat: repeat-x, repeat;
jsFiddle
edit
Hmm, multiple background just works like this. It's overlaying because the border underneath it is has the full height(it's repeating). A background doesn't see a other background as a boundry. You can do two things:
Make the boundry with a seperate element, so one element for the top
background and one for the bottom background.
You can edit the image to make the transition more smooth, thus you can't really see the border does overlap(a semi-transparent image makes a smooth transition easy)
#content_holder{
width:800px;
height:1000px;
background-color:rgba(0,0,0,.65);
position: relative;
z-index: 2;
background: url(http://i.stack.imgur.com/j3THB.png) top left no-repeat, url(http://i.stack.imgur.com/35j7u.png) bottom left no-repeat;
}
#content_holder:before{
content: '';
position: absolute;
z-index: -1;
top: 240px;
right: 0;
bottom: 0px;
left: 0;
background: url(http://i.stack.imgur.com/35j7u.png) top left repeat-y;
}
Solved it not entirely sure on a full explanation but it works find this post, it was quite similar to mine.
JSFIDDLE
A radical but effective way to deal with this if you have a known max height and you are already in a ":before":
&:before {
background: url('vertical-line.png') no-repeat 0px,
url('vertical-line-repeat.png') no-repeat 140px,
url('vertical-line-repeat.png') no-repeat 200px,
url('vertical-line-repeat.png') no-repeat 260px,
url('vertical-line-repeat.png') no-repeat 320px,
url('vertical-line-repeat.png') no-repeat 380px,
url('vertical-line-repeat.png') no-repeat 440px,
url('vertical-line-repeat.png') no-repeat 500px,
url('vertical-line-repeat.png') no-repeat 560px,
url('vertical-line-repeat.png') no-repeat 620px,
url('vertical-line-repeat.png') no-repeat 680px,
url('vertical-line-repeat.png') no-repeat 740px;
}
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% */
}