I have the following rule:
background: url(../img/redlines.png) repeat-y left 50px;
As you can see, the background image should start 50px below its div, and it works with no-repeat, but if I set repeat-y part of the image shows up at top of the div as well.
Any way to avoid this, and to keep repeating downwards only?
This is how it's supposed to function. For a tiled image, the position is merely the starting position. I would suggest something like:
HTML
<div class="foo">
<div class="bar">
<div class="content">
</div>
</div>
</div>
CSS
.foo {
padding-top: 50px;
}
.bar
background: url(../img/redlines.png) repeat-y left top;
}
.content {
margin-top: -50px;
}
When you use repeat-y, adding 50px to the top only changes the floating point of where the repeat starts.
You will need to add margin or relative/absolute positioning to achieve the same effect.
as you haven't provided a jsfiddle or any images, i'm assuming you could try background-position attribute in css.
refer to: http://www.w3schools.com/cssref/pr_background-position.asp
you may try :after on your container, see this example:jsfiddle
<div id="test"></div>
#test {
width: 500px;
height: 500px;
position:relative;
}
#test:after {
content:"";
position:absolute;
top:50px;
left:0;
right:0;
bottom:0;
background: url(http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg) repeat-y left;
}
Related
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
This question already has answers here:
How do I reduce the opacity of an element's background using CSS?
(29 answers)
Closed 8 years ago.
Simple as it may look I need to create a background for a website with a container that would be semi-transparent. If I add opacity: 0.5; inside of the #content I will end up having the entire container, with all the widgets and letters going ghost. What should I do to apply transparency only to the background image? One answer would be to add transparency to the picture inside of PS but still I am curious.
#content .container {
background:url(images/menu_bar.png) left top repeat-y !important;
}
Give this a try:
#content .container {
width: 500px;
height: 100px;
background: url(../images/menu_bar.png) left top repeat-y rgba(0, 0, 0, 0.5) !important;
}
The 'a' in rgba sets the opacity of the color which is 'rgb'. Of course you can set the values to your liking though. If this helps, click the checkmark ;)
Also, don't forget to set the width and height of the image.
One way around the issue is using the position attribute and the z-index attribute. The element you want to be transparent will be the one underneath and then the opaque content will be positioned on top of it.
example:
#transparent-box {
position: absolute; top: 10px; left: 10px;
z-index: 1;
}
#opaque-content {
position: absolute; top: 20px; left: 20px;
z-index: 2;
}
caveat:
When you use this method, you have to bear in mind the indentation/padding you want your content to have and then position it appropriately.
Hope that helps.
You have an interesting problem - the likes of which always have interesting solutions. I'm a big fan of CSS myself and I've tried to mimic the behaviour you need with a few CSS properties here : http://jsfiddle.net/Tax4w/
However, you can always tweak it to suit your needs if this is not exactly what you'd need.
Note: It does look the first time that the text is transparent as well but if you notice carefully it is not
HTML:
<div class="container">
<div class="inner-container">
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
<p>I am a big cat</p>
</div>
</div>
CSS:
.container{
width:500px;
height:500px;
background-color:#eeeeee;
position:relative;
}
.inner-container:after{
content:"";
background: url('http://placekitten.com/500/500') left top no-repeat;
width:500px;
height:500px;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
}
.inner-container{
width:500px;
height:500px;
}
p{
font-size:20px;
}
You can do something like this:
HTML
<div class="wrapper">
<div class="transparent"></div>
<div class="content">Text goes here</div>
</div>
CSS
.wrapper {
position: relative
}
.transparent {
opacity: 0.5;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
z-index: 1;
}
.content {
position: relative;
z-index: 2;
height: 100px;
width: 100px;
}
That will separate out the background opacity and the content opacity. The absolute positioning will ensure that the transparent div covers the entire parent div. Hope this helps!
I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.
I have a background image that is a 3px x 3px pattern.
I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).
I have this implementation:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
}
which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
background-size: 100% 50%;
}
However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.
Is there any way to simply accomplish this?
Thanks
Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.
How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:
<div id="element">
<div id="pattern"/>
<div>I'm at the top!<div>
</div>
The rules:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#element {
position: relative;
min-height: 100%;
}
#element #pattern {
background: url(path/to/pattern.png);
height: 50%;
left: 0px;
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
}
Add another container div
You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.
<div id="container">
<div id="myPattern"></div>
#container{
width:200px;
height:400px;
background-color:black;
}
#myPattern
{
background-color:yellow;
height:50%;
width:100%;
/* fill pattern here */
background-image: url(tt.png);
background-repeat: repeat-x repeat-y;
}
JSFiddle
I've got a div that is fluid width depending on the browser. I have a border image that I want to have on both the left and right side of the div. How would I do that? I have the left side working as needed:
#conten {
background: #fff url(/images/pagebgleft.gif) top left repeat-y;
color: #333333;
float: none;
width: 80%;
max-width: 1080px;
margin: auto ;
}
I want to use an image url(/images/pagebgright.gif) for the right side. Thanks!
Use multiple backgrounds or put another wrapper div and set the right hand background to it.
I may have posted too late. Each border needs to be in it's own div and absolutely positioned inside a relative position container. The background image I'm using happens to be an animated border gif i got from google.
<div class="wrap">
<div class="leftb"></div>
<div class="rightb"></div>
</div>
.wrap{
position:absolute;
width:400px;
height:400px;
background:#ccc;
}
.leftb, .rightb{
position:absolute;
top:0;
background: transparent url(http://www.capriogroup.com/webstuff/Images/Borders/Animated-Border-ChainLinksVertical.gif) repeat-y 0 0;
color: #333333;
width: 20px;
height:400px;
}
.leftb {
left:0;
}
.rightb {
right:0;
}
Check working example at http://jsfiddle.net/ZxQ6Z/1/
What's the best way (if any) to make the inside box transparent so the image can be seen with no opacity (clear image) and the rest of the outer box opaque. So far this is what I'm doing:
<style>
#a {
background-color: black;
float: left;
} #b {
opacity : 0.4;
filter: alpha(opacity=40);
} #div {
position: absolute;
height: 30px;
width: 30px;
top: 90px;
left: 90px;
border: 1px solid #FFF;
background: transparent;
}
</style>
<div id="a">
<div id="b">
<img src="http://clagnut.com/images/ithaka.jpg" />
</div>
</div>
<div id="div"></div>
Any ideas? thx
The maximum opacity of an element is the opacity of its parent element. So if div#b has an opacity of 40%, if his children have 100% opacity in style they will also be 40% absolute opacity.
To accomplish what you're describing (at least what I think you're describing), one way could be to have both the transparent wrapper and the image children of a parent div with relative positioning. You can absolutely position both of the children inside of that wrapper so that the image shows up on top of the transparent box.
Edit: Here is the code for the effect you are describing. My example has a 480 x 320 image, and a 30-pixel border:
<style>
#back {background-image:url(mypicture.jpg);
width:480px;
height:320px;
position:relative;}
#middle {position:absolute;
width:480px;
height:320px;
background-color:#000;
opacity:0.4;
filter:alpha(opacity=40);
top:0;
left:0;}
#front {position:absolute;
width:420px; /* 30px border on left & right */
height:260px; /* 30px border on top & bottom */
background-image:url(mypicture.jpg);
background-position:-30px -30px; /* compensate for the border */
top:30px;
left:30px;}
</style>
<div id="back">
<div id="middle">
</div>
<div id="front">
</div>
</div>
If I understand you correctly, try using just one div (i.e. get rid of the outer one with ID "a") and setting a colored border around it. Or you could get more flexibility by "faking" a border using 4 divs for the left, right, top, and bottom edges and 4 more for the corners.
It's kind of hard to know what you mean without an example page, or screenshots of what you expect and what you're actually getting.
EDIT: I was about to edit in basically the same thing Rex M wrote. Here's another (although idealistically inferior) way to do it:
<style>
#a {
float: left;
position: relative;
}
div.overlay {
opacity: 0.4;
background-color: black;
position: absolute;
}
#t {
left: 0; top: 0; height: 90px; width: 450px;
}
#b {
left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
<div id="t" class="overlay"></div>
<div id="b" class="overlay"></div>
<div id="l" class="overlay"></div>
<div id="r" class="overlay"></div>
<img src="http://clagnut.com/images/ithaka.jpg">
</div>
If you want to be sure that the images have a certain color for a background, you could just as well stick a background to all IMG-elements in your stylesheet:
div#a img { background: #FFF; }
Anyhow, the filter-property in CSS should not be relied upon, as it is not part of the official specifications for CSS 2.1.
I might have misunderstood the question, though. Could you rephrase it or provide pictures of expected results?
To follow on what Rex M said, you'll need to change things so that the non-transparent elements aren't children of the transparent elements.
You can use absolute or relative positioning to line up your "border" with the picture, although this can often have inconsistencies between browsers.
The most painless way off the top of my head is to use javascript to get the top and left pixel locations of the image and set the top/left css properties of the border to match (and set the size of the border to that of the image).
UPDATE:
The asker showed an example of what he is trying to recreate. In the example linked, the shaded areas (the "not selected" area) of the picture is created by 4 divs.
The top and bottom divs are the full width of the image, and are set to have a height that is the difference between the top/bottom of the selection box and the top/bottom of the image respectively.
The side divs have height and width modified so that they fill in the "side areas" of the image.
The sizes are updated via a mousemove event.