I have a webpage that is styled using CSS
The contents of the web page are contained within DIVs.
Example:
<div id="container">
<div id="ticker">
</div>
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I want a background on the container div that will show as a semi transparent background (in a desired color), and then all the contents inside the div to appear normally without transparency.
I have tried methods including apply a opacity to the parent div, but it applies it to all the child divs which I do not want.
How do I do this?
Use a 1x1 background image (a png) at whatever transparency of whatever color you'd like and let it repeat.
You could use an rgba value for your background color instead and set the alpha value to your desired opacity level:
background-color:rgba(255,255,255,0.125);
http://www.w3schools.com/cssref/css_colors_legal.asp
you can use rgba value for this. Write like this:
#container{
background:rgba(0,0,0,0.5)
}
For IE there filter for this like this:
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000); /* IE6 & 7 */
zoom: 1;
You can generator your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
Related
I'm creating an application that edits the formatting of any webpage. I'm trying to change the background color of all the child divs of a selected div, but my current code makes images within the divs disappear.
.blah *:not(img) {
background-color: #fffdd0 !important;
}
I tried using :not() to make the formatting not apply to images, but it didn't change anything. Is there a way to make the background color not apply to images or not hide images?
i think your imgs are not children but they are grandchildren of your .blahdiv . that's why your code is not working. and so the parent of the img ( .child in my case ) gets the background and so a background appears under the image although the image doesn't get the background-color style
you could try something like this ( don't know your HTML structure or how complex it is )
div *:not(.child) { background-color: #fffdd0 !important;}
.parent > .child *:not(img){ background-color: red !important;}
<div class="parent">
<p>Child Text</p>
<h1>Child Heading</h1>
<div class="child">
<img src="http://placehold.it/350x150">
<p>grandChild Text</p>
</div>
</div>
I am using Webpack to load an image to use as a background image. When I apply it using CSS, the div takes on any property I give it other than a background image..
.cover {
background-image: url(../assets/images/childcarer_background.jpg);
background-size: cover;
min-height:500px;
}
<body>
<div class="container-fluid">
<div class="row">
<div class="cover">
</div>
</div>
</div>
<script src="homepage.js"></script>
</body>
When I inspect this in Chrome dev tools, the image is being loaded (I can access it directly) and if I copy the style from the .cover and apply it to element.style within Developer Tools, the style is applied as expected..
It will even overwrite the style when I apply it directly to the element...
This works, but obviously isn't sustainable.
If I inline the style, it works..
<div class="row" style="background-image:url(2769a294377fdc1af5fa011c9bedc6a0.jpg);">
<div class="container">
</div>
</div>
but if I try to make the stylesheet background !important...
It overwrites the background image with a blank background!
Why is this happening?
Try adding !important to your background element. So...
.cover {
background-image: url(../assets/images/childcarer_background.jpg) !important;
background-size: cover;
min-height:500px;
}
try but eliminating space between the colon and url. no space should solve it.
.cover {
background-image:url(../assets/images/childcarer_background.jpg) !important;
I tried webfilters to change the white background of this image looking at this:
Change color of PNG image via CSS?
Not sure if this is the way to change the whitebackground of this image:
http://i.stack.imgur.com/AZRrE.png
Is it possible to change this through css?
You need to use a png that has a transparent background - the one you are using has a white background. For example.
.red {background-color:red;}
.blue {background-color:blue;}
.green {background-color:green;}
<div class="red"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="blue"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
<div class="green"><img src="http://i.imgur.com/UAdT2Jd.png" /></div>
If you do a search for radio button png you should be able to find a better one than the one I have used (as mine has some rough edges that are showing up)
Is it possible to change this through css?
No. If the image had some transparency, you could change the background-color (and/or background-image) of its parent element, like so:
<span class="thing"><img src="your-semi-transparent-image.png"></span>
And in the CSS:
.thing {
background-color: aqua;
/* This will show through the transparent region of the image */
}
I'm having troubles with this - The images are not displaying
<div class="carousel-inner">
#foreach ($model->pictures as $picture)
<div class="fill"
style="background-image:url({{ URL::asset($picture->path) }});">
</div>
<!-- {{ HTML::image($picture->path)}} -->
#endforeach
</div>
if I go to the view source the image is alright, actually I pasted the result in the url and works. By the way in the example i have a commented line that works, but I need the image as a background in a div and not actually as an html tag.
What could it be?
the fill class on css:
.fill {
width:100%;
height:100%;
background-position: center;
background-size: cover;
}
It seems that the class "fill" doesn't have the height nor the width. Since you are defining a background for an element that does not have any size, the element itself (ie: the div) is now being showed.
You can resolve this by defining the width and height, like this:
<div class="fill"
style="background:url({{ URL::asset($picture->path) }}); no-repeat;
background-size:269px 95px;height:95px;width:269px">
</div>
Try this:
<div style="height:100px;width:100px;background-image:url('{{ asset('http://www.example.com/images/image.png') }}'); border-radius: 5px;position:relative">
Instead of using:
URL::asset($picture->path
You can use the absolute path to the image.
For example:
http://www.example.com/images/image.png
Also, try using width in px instead of in %
Note: It is better to avoid inline styling but since you are already using it for the background-image, I would just go ahead!
I have an element with a transparent png as its background image - it's like a polaroid with the photo bit cut out so just the frame is showing.
With this as the background I then want a standard image to sit behind the element that has the transparent png background - to fit inside the frame.
i've tried setting z-indexing and opacity and although I can get the image to show through its obviously transparent because of the opacity settings.
Any ideas?
If .yourPhoto is a background image, you could do this:
<div class="yourPhoto">
<div class="yourPNGframeImage">
</div>
<div>
Or you could use inline images and position both absolute:
<div class="container">
<img class="yourPhoto" src="">
<img class="yourPNGframeImage src="">
</div>
.container {position: relative;}
.yourPhoto, .yourPNGframeImage {position: absolute; top: 0px; left: 0px;}
there is a fair few things to look out for when doing PNG.
when cutting make sure you
background is off.
export as png24.
if your in ie6 you will need to use someting like twin-helix png fix
http://www.twinhelix.com/
Try these steps. You should not have to change the opacity of your image as it will affect the whole image. When you use z-indexing you should also put in the position css element