background image, but with opacity css - html

I have an issue with my background not covering the whole site from top to bottom. I know what causes the problem, but as to fixing it I am unsure. My CSS looks like this:
#background-img{
display: block;
position: absolute;
background-image: url(http://images2.alphacoders.com/778/77840.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
width: 61.8%;
margin-left: 19.1%;
height: 100%;
opacity : .3;
}
The problem seems to happen where the at the point where I add height. But I am not allowed not to have it there as there wont be anything to have a background for. The problem initially is that I need opacity on the image, so I can't just make it cover the wrapper either, as that will give the whole site opacity, not just the background.

If anyone ever should read this post. I found a solution. I just moved the whole background-image div to the top of the very wrapper div, and made the position fixed, instead.

Related

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: background image only shows on first occurring div on page

I have a problem which has me stumped. I have it simplified down to this. The relevant (only) CSS style is:
#segment1,
#segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(../XYZ-TEST/1alt.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top left;
}
and the relevant test HTML is:
<div id="segment1">Segment one</div>
<div id="segment2">Segment two</div>
So you think you'd get two identical divs side by side, with the same background image - except when it is rendered, the background image ONLY appears on the first occurring . The problem appears to be on the rendering, not the code. If I put the HTML for segment2 first, that one gets the background image and the other one doesn't. Other CSS seems fine, just the background image fails. The path to the background image is fine.
It looks like a problem within CSS with defining multiple background images, but I can't find any other problem like it mentioned on the web. Tested in both Chrome and FF. I've ruled out a stray semi-colon or similar, because both are defined simultaneously. Can you see anything I've missed ?
Remove background-attachment:fixed from css. It should solve your issue.
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/256/
#segment1, #segment2 {
width: 16.6667%;
height: 100%;
float: left;
background-image: url(http://www-mtl.mit.edu/img/bg_01.gif);
background-repeat: no-repeat;
background-position: top left;
}
Explanation: If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

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 !

Setting background-image to an image with partial transparency

I'm trying to place one div with a partially transparent background (meaning regions of the image are blank -- not X% opacity) on top of another.
#about {
background-image:url('http://i.imgur.com/B922OoM.png');
background-position: center;
background-repeat: none;
background-size: cover;
background-color: transparent;
z-index: 2;
height: 450px;
width: 100%;
}
I can't get the div to not fill with white behind the image.
jsfiddle: http://jsfiddle.net/4HAxu/ -- the relevant div is #about
(I'm pretty sure the image is exported properly -- if you change background-color:transparent to background-color:blue, you'll see what I mean.)
Your image is fine.
It's the fact your #header doesn't actually extend down that far. If you change the background colour of your body you'll see it's not your #about div it's the body showing behind it that is white
Red BG body JSFiddle
To alleviate this problem, if you actually overlay your divs you will get the effect I think you're trying to achieve.
Overlayed divs with negative top margin

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/