The PNG image is the sidebar, and the black part is the CSS background, the PNG's alpha seems to override the black box.
When I change the image's opacity, you can see the box continues through the entire image, but is still overridden and I double-checked the sidebar's transparency, but it's set up properly.
It does this on Google Chrome as well as Firefox.
Relevant CSS:
.sidebar{
background: url('side1.png') lightgray 10% 50%;
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
width: 173px;
z-index:1;
float:left;
position:relative;
opacity:0.5;
}
.header{
background: black;
background-position: top right;
float:right;
width:100%;
height: 200px;
z-index:0;
position:absolute;
}
Relevant HTML:
<div class="sidebar">
<img src="images/pic1.png" class="icon">
</div>
<div class="header"></div>
This appears to be just a simple case of the division going back behind the floated content. Most people don't realize that just because there is floated content there, the division still expands back behind it all the way to the edge, like it normally would if the floated content wasn't there.
That division is taking up its maximum amount of available space like it is expected too. The floated content is only pushing the content, which at this point, there isn't any. Making your sidebar partially opaque, this issue becomes visible as you can see that box behind your image now. A quick fix, per say, would be to add a margin to the division to push it out from behind the sidebar, like so:
.header {
margin-left: 173px; /* The width of your sidebar */
}
Note, however, that you would have to apply this margin to the left side of all your block-level elements that need pushed out from under. So it would make sense to put all the right content into a single box that gets pushed out, to prevent confusion.
Edit: The reason your black background doesn't pull through on the sidebar image is that you're setting it's background to light grey here:
background: url('side1.png') lightgray 10% 50%;
This will put a light grey background behind the image rather than letting the transparent part of your image go through to whatever is behind it. Try removing it:
background: url('side1.png') 10% 50%;
See the jsFiddle example.
Related
I am wondering how can I something like this with CSS & HTML:
https://www.vatsim.net
You open the page and you get a backrgound that fits all the browser, but then you scroll down and you get a solid color as background and more info.
I tried with this, but is not what I am looking for, I want something like the link on the top,
https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
Thank you very much!
You can get far by just adding a bit of CSS. In the snippet below, there are two divs. The first one is for the top area with the image. The second one is for the rest of the content.
The first div gets a height of 100vh, making it 100% of the screen height. The background image is centered and set to scale so it covers the entire div. And, well, that's basically all there is to it. No script needed.
* { /* Just get rid of some whitespace */
padding: 0;
margin: 0;
}
div.image {
height: 100vh; /* div is 100% of viewport height */
background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg);
background-size: cover; /* Entire div is covered by the image */
background-position: center; /* Image is centered relatively to the div. */
}
/* Just some styling to make it visible. */
div {
color: white;
font-size: 150%;
}
div.content {
color: black;
background-color: #eee;
height: 2000px;
}
<div class="image">This is the top area. The image exactly covers the view.</div>
<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>
The webpage you added is basicly splitted to divs, the first is 100% height and 100% width. therefore you can see him all over your screen.
The others are just divs with 100% width but not 100% height, which gives you the ability to switch the background color from light gray to white and then to gray.
Not too complicated but yet a nice design
I came accross this problem while adding anchor elements to a section for a menu. I want each element to display a transparent block of color behind it when the mouse is hovering over. At the same time, I want the page background to have stripes from CSS (background: linear-gradient; or background:repeating-linear-gradient;) (I run into this problem with either). When I have a link on top of these vertical stripes and I hover over it, the underlying stripes are shifted in one direction by about a pixel. Its a very small effect but none-the-less frustrating. I have removed all other elements from the html and css that are not involved in this issue and placed the resulting files in this jsfiddle: http://jsfiddle.net/bw9fk0y4/5/
body {
margin: 0px;
padding: 0px;
background:
repeating-linear-gradient(90deg,transparent, transparent 2%, rgba(0,0,250,0.2) 2%, rgba(0,0,250,0.2) 4%, transparent 4%);
}
div nav{
position: relative;
left: 250px;
}
div nav a{
margin: 5px;
display: inline-block;
padding: 10px;
}
div nav a:hover{
background-color: rgba(250,250,250,0.4);
}
<body>
<div id = "container">
<nav>
link 1
</nav>
</div>
</body>
What I have found is that for some reason I don't run into this effect when the anchor is further to the right of this page. If it is centered or closer to the left side or even centered I do have this effect, even if I position it by setting a fixed width and the in CSS (margin: 0 auto;). If anyone knows of a way to aleviate this problem I would be very happy. This is only happening in chrome. I've tried using the browser specific gradients, no difference. I am afraid that this is just a result of CSS gradients not behaving well, because they seem to misbehave quite easily when played around with, but they are too convenient for me to give up on them easily.
I'm a complete beginner. I tried my best to search for a solution, but part of the problem is that I don't even know what the technical term is for the thing I'm trying to do.
Essentially I want to have a tiled background repeating everywhere, but then also have a white rectangle that extends from the top of the page to the bottom, occupying roughly 50% of the horizontal screen space. How would I go about accomplishing this?
If I get it correctly, you might just want a repeated background of the page and then absolutely-positioned <div> with white background.
This is pretty basic stuff, I suggest you take a beginner's course in HTML and CSS before going too much further.
body {background: url(tile.png) left top repeat;}
content {background-color: #fff; margin: 0px auto; width: 50%;}
I hope this is what you wanted. It is a tiled, repeating background with a white strip, half the screen space, going down the middle. If you want a tiled background, you don't need to define anything in CSS, and CSS will do it for you, but I'm not sure with the browser compatibility so it might be safer to explicitly define repeat:.
First of all, to those complaining that height: 100% does not work, note that the div with height: 100% is only being the height: 100% of its parent element (the container that encloses the div, in the case of this JSFiddle, the #container). Therefore, if its parent has no content, the div with 100% height will become invisible.
Therefore, the html, body and container must all have height: 100% for the white strip to have 100% height here in this JSFiddle:
JSFiddle
After this you are free to add any content to the white strip, which will probably be your webpage! :D
Note: Here I have defined the strip as width: 50%; but sometimes it may be better to explicitly define the width (width: 1200px;) so that you can avoid problems with the text and divs going haywire when you zoom in, zoom out, etc.
Edit:
Also, since the height of the container increases as you add more content, such as divs, the problem with the white strip not reaching the bottom of the page is that you simply have nothing that fills it up. As you add more content the strip will naturally grow to fill the page. Good luck!
Solution 1
Here's a solution that uses only the background CSS property applied to document body, no extra elements needed. It's documented so you can understand whats going on.
body
{
/*
* This specifies two background images, separated by comma
* First parameter is just a white pixel
* For the second use any background pattern of your choice
*/
background-image:url("http://i.imgur.com/qdx0kzd.png"),
url("http://subtlepatterns.com/patterns/tasky_pattern.png");
/*Center background images, self-explanatory*/
background-position: center;
/*Repeat white background image on Y-axis (vertical) only*/
background-repeat: repeat-y, repeat;
/*Make white background size 50%. Adjust as needed*/
background-size: 50%, auto;
}
You can see an example in this fiddle: http://jsfiddle.net/dV2zZ/6/
Solution 2
This solution applies different backgrounds to different elements: the pattern to the document body, and the white background to a content container. Code is also documented for better understanding.
HTML
<div id="content">Content</div>
CSS
html, body
{
margin: 0;
/* Make document size extend to the bottom of the page */
height: 100%;
}
body
{
/*Patern background. Use a pattern of your choice*/
background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}
#content
{
/*Make container background white*/
background-color: #FFFFFF;
/*Center container*/
margin: 0 auto;
/*Size 50%, adjust as needed*/
width: 50%;
/*Extend to the bottom*/
height: 100%;
}
See an example fiddle here: http://jsfiddle.net/jDRG3/1/
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}
I want to create a headline (h2) with an image at the right-most area of the bounding box. I have the layout almost right except I can't push the image a little bit to the right of the element's bounding box -- how would I tweak my css so it is displayed correctly?
I'm trying to do something like this:
[{someHeadLineText}{dynamic space }{image}{5px space}]
where the [] indicate the total available width of my content.
Html:
<div class="primaryHeader">
<h2>News</h2>
</div>
Css:
.primaryHeader h2 {
background-color: green; /* the header looks like a box */
color: black;
background: transparent url(../images/edit.png) no-repeat right center;
border: 1px solid red;
}
I am placing the image to the right of my h2 element and centered vertically -- but how do I adjust the placement of the background image?
I'm afraid I think you can't. You can use either right or a pixel value as the image's x-position but that pixel value will always be relative to the left corner of the bounding box. Adding padding won't help either, it will just extend the bounding box further.
The only solution I know for this is either adding the shift to the image itself, or using an absolutely positioned element (with a slight offset) hovering behind the element - but that would require you know the width and height in advance.
Edit: evil, hacky idea. I have no time to try this out right now, but it should work if the h2 is a display: block.
Give the h2 a position: relative.
Place a div or other element inside the h2 with the following:
position: absolute;
left: 0px;
top: 0px;
right: 5px; /* This is the shift */
bottom: 0px;
background-image: url(...);
background-position: right center;
background-repeat: no-repeat;
z-index: -1; /* I don't know whether this will overwrite the h2's content */
this could lead to the desired effect, I'm not sure as I have not tried.
The element may overlay the h2's other content, in which case you would have to put the rest into a <span> element with position: relative and z-index: 1.
It's really hacky. Better put the padding into the image itself, much cleaner.
Can you add padding pixels in the image itself?
You could ditch the background image and use an image instead.
<div class="primaryHeader" style="padding-right: 5px;">
<img src="../images/edit.png" alt="" style="float: right;" />
<h2>News</h2>
</div>
You can look into CSS3 background positioning. It works in all the modern browsers (not IE, of course).