Background-image + Fixed + NOT Transparent - html

This is my css:
body {
background-image: url('mybackground.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
But when I scroll down, the background image is transparent & this is not what I want.(my background image is like a header image, just like this website but the header if fixed).
What should I do?
Any suggestions?

This time it is better explained:
You need header element, with position fixed:
<header style="position: fixed;"> ... </header>
Try the JSFiddle link here
.
Best of luck.
(Mark this as answer if this serves your need)

What I would suggest is using a fixed div at the top of the page that the content can scroll behind. You can remove the background code. this way you have more options and can still add background texture if you like. Otherwise you are applying position FIXED to the whole body which you dont want to do you want to apply fixed to 1 image element. Please Check this JSFiddle
I would also read this article to read more on the layout position properties.
.header {
position: fixed;
top: 0px;
}
<div class="header"><img src="mybackground.jpg"></div>

Related

CSS - Background Image With a fixed Div

I've started with this code. Results as expected, I have a image as the background of my first div, and it takes up the whole space.
<div id="Page1"></div>
<style>
height: 100vh;
background-image: url("/someImageLink");
background-size: 100vw 100vh;
</style
Every thing is fine, now I want to add...
position: fixed;
bottom: 0;
right: 0;
...in the css. Now the background image disappears all the way.
Is it possible to use a <img> to do the same thing as css background-image, or make it clip without it going blank?
Additional Information: I want a few of these divs in a row.They will appear and disappear as needed.
There will be buttons and text within the divs.
Your div does not have a width. It is necessary to add one now that you have changed its position from static to fixed

Scrolling fix: a:hover + links in div not working any more because other div's margin is on top of that div

Recently I altered my site so that the divs below my jumbotron div (the first div after the nav bar)upon scrolling would go up, covering the jumbotron div. As cool as this is for an intermediate beginner like myself, I cannot click on the links on my jumbotron, nor does a:hover work.
I believe it is this way because the second div is on top of the first, I only use a margin-top of 660px on the second div to bring it down and expose the jumbotron.
Does anybody know a way to retain something like this way of scrolling while having the links on the jumbotron fully functional?
My html code: http://codeshare.io/L2eAF My css code: http://codeshare.io/jLiF3
Jsfiddle https://jsfid dle.net/xksLsoat/
The page (blue on bottom is the second div):
Any help would be dearly appreciated!
In your CSS, you set z-index:-1 to #jumbotron so the div goes behind the #wrapper, no interaction possible ... just remove the z-index.
#jumbotron {
background-image: url("http://i.imgur.com/WeLp8bN.jpg");
background-size: cover;
background-repeat: no-repeat;
height: 90%;
width: 100vw;
z-index: -1;
position: fixed;
}

CSS Bottom Positioning

So, I have this:
.cmon
{
background-repeat: repeat-x;
background-image: url("line2.png");
position:absolute;
bottom:0px;
}
What it should do, is put the image (line in this case) on the bottom of the page, from what I understand, and repeat it. It does put it on the bottom, but doesn't repeat, anybody knows what's my problem?
This is how it looks like when the code is on:
http://goolag.pw/temptest.html
Also, in the menu (top right corner) the image doesn't even show up, nor does is it on the bottom.
I will be more than happy if anybody knows whats the problem.
(sorry if links are not allowed here, there are no commercials on the web, it's really just to show what's the problem)
To position background images you should use the background-position property:
.cmon {
background-repeat: repeat-x;
background-image: url("line2.png");
background-position: bottom;
}
The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.
You'll need to ensure your element has some height and width, however, as background images are not content and do not affect the size of the element.
So first, your problem is not only about CSS but HTML too. You have to attach your attribute .cmon on another tag like <span>, <p>or even <div>.
<div class="cmon"></div>
Then for your CSS :
.cmon {
background-repeat: repeat-x;
background-image: url("line2.png");
position: absolute;
bottom: 0px;
left: 0px; right: 0px; // For having a full width bar
z-index: 999999; // Will be always visible, even when the menu is showed up
height: 4px; // attribute the height of your image
}
Hope this help you.
Ps : Don't forget to use HTML5 !

Dynamic resizing image overlapping below divs

I currently have a dynamic header image that resizes to the size of the browser. (exactly like this: http://www.theadventurists.com/ ) But currently it overlaps my other content. What I actually want is the image to take up the screen and scroll down to see the content.
The website I linked, how do they do this without overlapping content? Is there JS involved? The closest I have gotten to replicating it is having the div below have margin-top 100%. But that is a bad fix due to the margin becoming too large when the browser is certain sizes.
<div id="test_bg">
</div>
<div id="page">
<p>This is the content</p>
</div>
#test_bg{
background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom:0;
right:0;
}
#page{
background-color:red;
margin-top:100%;
}
http://jsfiddle.net/9Trb2/9/ blue being the image, red being content.
You're right on with setting margin-top 100% as not the best way to go about it. There were a couple of issues with your JSFiddle - the background URL was pointing to an imgur page and not the actual JPG, so I changed that. Also, you had the css selector page which instead needed to be #page to correctly target the div.
My approach for solving your issue was to change the #test_bg height to 100% and remove absolute positioning. By taking away absolute positioning, #test_bg becomes part of the document flow and the next div will automatically be positioned right below it, which is what you wanted. The other thing you need to do in order to be able to set that div to 100% height is to also set the body and html height to 100% - otherwise you'd see that setting #test_bg to height=100% wouldn't do anything. Here's the JSFiddle.
#test_bg{
background-image:url(http://i.imgur.com/GgfpgA3.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html,body{
height: 100%;
}
#page{
height:400px;
width:400px;
background-color:red;
}

CSS - Can an image overlap a page border without affecting page width?

I have the following element in my initial page concept:
http://tinyurl.com/bcmcxp9
The ribbon is a PNG image. What I'd like to be able to do is position this image exactly over the border of a box-shadowed div (representing the page content), without affecting the page width.
I've tried a couple of techniques.
By using position:absolute, I've been able to achieve the visual effect I was looking for, but it brings up the dreaded horizontal scrollbars! I want the edge of the div (not the edge of the image) to represent the edge of the page.
#banner-ribbon {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
position: absolute:
width: 419px;
height: 114px;
left: 700px;
top: 400px;
}
By using a div that sits between the content wrapper and the background, I've been able to position the image in the right place without affecting the horizontal scrollbars (sort of, I might need a little javascript to absolute-position it relative to the center), but I can't raise the image's z-index above its child divs!
#banner-ribbon-wrapper {
background-image: url(ribbon-right.png);
background-repeat: no-repeat;
background-position: 90% 400px;
z-index: 70; /* does nothing */
}
Any ideas?
It sounds like the image is extending the boundaries of the page, causing the horizontal scroll bars. One way to fix this may be to set a width for your page and then hide anything that goes outside of it. Something like this may work for you:
body {
width: 100%;
overflow-x: hidden;
}
Example jsFiddle
Give your content div
position: relative
and to your ribbon
position: absolute
right:0
Make sure your image don't extend boundaries uncontrollably.
Working sample on JsFiddle:
http://jsfiddle.net/BrvJk/