I have setup streched background on the homepage of https://picup.it through the class
<div class="bg-background">
Which is defined as below:
.bg-background {
height: 100%;
}
.bg-background:after{
background: url({% static "images/picup-bg-01.jpg" %}) no-repeat;
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
};
However, it looks slight different on localhost. In production (picup.it) background image is stretched to the screen size - you can observer that after scrolling down a div with panel is going out of the background image.
On localhost however, background image covers full div and goes below the scrolling - until the place where div ends.
Why? Same with Chromium and Firefox.
add a background image to your body and fix that image
body
{
background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;
}
try this syntax instead
.bg-background {
background:url({% static "images/picup-bg-01.jpg" %}) center no-repeat;
height:565px; /* just pick a random height */
width:100%;
position:absolute;
opacity: 0.6;
background-size:100%;
z-index: -1;
}
It may also due to you didnt specify a height, thus it scaled differently.
second explanation, upon inspecting your html dom struture you did.
<body>
<div class='bg-background'>
<!--- html content -->
</div>
</body>
should be this instead
<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>
Do you have any browser extension? It might be CSS code is being injected into the page.
Second idea:
You could try changing your code into:
background-image: url('images/picup-bg-01.jpg');
for one, and keep:
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
EDIT:
If you use the Tryit Editor from the w3schools website, you'll see that your CSS code appears exactly as it does on your website (with the unstretched height), whereas using background-image in the same editor does provide you with the expected 100% height size.
EDIT #2:
Actually, it's not exactly what I said while writing EDIT #1. If I use your style code for the body of the page in the editor I get what you currently have on your website. If I use it in a div, however, it is properly scaled.
The code I provided seems to be working on both scenarios, though.
Related
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
Apologies for the bad HTML here, I'm not very good at it. When trying to make a HTML page for a friend's Discord bot, something weird started happening when trying to get the background div (class of background) behind the body. Simple enough, I just set a z-index of -1. This causes issues with the Discord bot listing website, though, as it sends that background behind everything and means that it's hidden. "No problem, I'll just set the z-indexes to be 765 and 766 right?" Wrong. I've tried it on the Discord bot website and codepen.io, any time I use a non-negative index on main it brings it to the front. I could make the indexes for background and body 0 and 999, background will still be in front. Does anyone know what I can do to fix this?
Relevant CSS:
body {
margin: 0;
overflow-x: hidden;
position: absolute;
z-index: 999;
}
.background {
background: url(URL);
width: 100vw;
background-size: 100% 100%;
min-height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
Relevant HTML:
<body>
*things*
</body>
<div class="background"></div>
What about this?
body {
background-image: url(https://placehold.it/1000);
background-size: cover;
}
I think there might be some confusion with how the elements work. I think you're making it a step more complicated. Is that so?
I have two background jpeg images that are repeated vertically across the entire left and right borders of my website.
Here is my code:
.gradients {
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg");
background-position: top left, top right;
background-repeat: repeat-y;
}
<body>
<div class="gradients">
<div> website content in here </div>
</div>
</body>
This is what it looks like:
left and right background images
I need a way to make both of these jpegs transparent.
Please don't suggest I just use CSS gradients, I cannot use CSS Gradients because of the color complexity needed to make the left and right images the way they were. These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
I've seen methods of making a single background image transparent by adding an opacity div in front or behind it. How would I do this for my .gradient div, when I have two background images?
I need a way to make both of these jpegs transparent.
As you can't simply give opacity to the gradients div, which would affect the website content as well, you could use pseudo elements, like this, which will not effect the website content
.gradients {
position: relative;
padding: 0 60px; /* for this demo, push the content off the image */
}
.gradients::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/00f);
background-position: top left;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
.gradients::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/f00);
background-position: top right;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
<body>
<div class="gradients">
<div>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
</div>
</div>
</body>
I'm not sure what this means:
These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
If you can make them in Photoshop, you can make your gradients in CSS. A gradient is by definition hundreds of colors, as it transitions from one to another (and potentially another). The screenshot you've shared is definitely able to be reproduced using CSS gradients.
However, since you've asked to rule that out, I'd suggest using 24-bit PNGs instead of JPGs. 24-bit PNGs have an alpha transparency channel which would allow you complete control over how transparent they are overall, and how transparent they are per-pixel. There is no background-transparency property at this point, so what you're trying to accomplish can't be done with the HTML markup you have and CSS.
The third option is to have an empty div with opacity for your background:
<div class="gradients"></div>
<div>Website content here</div>
html { height: 100%; }
body { min-height: 100%; position: relative; margin: 0; }
.gradients {
background-image: url('left.jpg'), url('right.jpg');
background-position: top left, top right;
background-repeat: repeat-y;
bottom: 0;
left: 0;
opacity: .5;
position: absolute;
top: 0;
right: 0;
}
Codepen Link, with CSS gradients because I don't have your JPG assets but the effect is the same.
I can think of a couple of ways:
You should put them in separate divs and place these divs underneath the main container / wrapper. You can css-position them accordingly.
You could work with actual .png images that allow for a transparency gradient
You could work with a background image that already has both the gradients and the desired bg-color in one file. Then you could make it background-repeat: repeat-y; and background-size: contain.
I have a background image for a site that looks fine in firefox,chrome, and safari. IE however, the image shows up on the top of the page. what am i missing?
#background {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
top: 0px;
z-index: -999; /* Ensure div tag stays behind content; -999 might work, too. */
opacity:.09;
filter:alpha(opacity=9);
}
.stretch {
width:100%;
height:100%;
}
html:
<div id='background'><img src='<?php echo $bg;?>' class='stretch'></div>
//rest of page//
where $bg is path to a image.
Just use PHP in an inline style:
<div id="background" style="background-image:url(<?php echo $bg; ?>);">
I think you want to achieve a full page background this will helpful for you.
http://css-tricks.com/perfect-full-page-background-image/
Good luck!
I have a web page that loads some stuff using AJAX. I want to display an overlay with a loading indicator while the loading is in progress, so that the user cannot interact with most of the page - except the menu at the top. I'm using jQuery and the jQuery BlockUI plugin to do this.
I call $(element).block() and it works fine, but the overlay only extends as far down as the current content of my page. As more content is loaded and added to the page the overlay moves down with it and this looks a bit ugly. Ideally I'd like it to cover the entire visible area of the page right from the start. A simple hack for doing this would be to set a large height value for the overlay, like this:
$(myElement).block({
overlayCSS: {
height: '10000px'
}
});
... but this creates a scrollbar! How do I avoid this and make it just the right height to cover the visible page, but not enlarge it?
Use position: fixed; instead of position: absolute. This way the overlay will not move even if you scroll.
In XHTML the html and body elements are not quite as magical as in HTML. The body element doesn't fill the viewport (window) automatically, it's size is only as tall as it's contents.
To make an element fill the window you first have to make the html and body elements fill the window:
html, body { height: 100%; }
Then you can use height: 100%; on an element in the body to make it cover the full height.
Set position to absolute and height to 100%.
I have made a complete example for you, now you can use that in your application and and just hide it after ajax request completed.
Click here!
<div class="overlay"></div>
<div id="container">
content Whatever you want even you can delete this container
<div>
Worked for me! I changed absolute to fixed.
function showWaitPopup() {
var obj = document.getElementById('bkdiv');
if (obj) {
obj.style.display = 'block';
}
return true;
}
showWaitPopup();
div.bkdiv {
background-color: #000000;
opacity: 0.6;
filter: alpha(opacity=60);
z-index: 2000;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 200%;
display: none;
}
<div class="bkdiv" id="bkdiv"></div>
The following code ended up working for me:
$("body").block({
message: '<h2>Loading...</h2>',
overlayCSS: {
position: 'absolute',
top: '0',
bottom: '0',
left: '0',
right: '0'
}
});
body {
color: #004A6E;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I used the following post as a reference: Make div 100% height of browser window
the one modification that I had to do was adding left and right. My overlay was covering only the half of the screen.