I have been struggling with something which in theory should be very simple for a few days now... and i am determined not to give up.
I am trying to achieve this:
Essentially horizontal rule, with an ornament between - the HR will span the full width of the screen.
So i sliced my PSD to drop out the ornament as a image - and i am trying to overlay this onto a centered but failing miserably.
My Markup:
<div>
<hr>
<img src='assets/img/ornament.png' class='center'>
</div>
CSS:
hr{
height: 2px;
color: #578daf;
background-color: #578daf;
border:0;
}
I just cant figure out how to make the image appear in the centre of the HR.... Any help or pointers would be appreciated.
You can also accomplish this with a CSS pseudo element. All that's needed for HTML is the <hr>
hr:after {
background: url('yourimagehere.png') no-repeat top center;
content: "";
display: block;
height: 30px; /* height of the ornament */
position: relative;
top: -15px; /* half the height of the ornament */
}
Change the markup tp
<div class='hr'>
<hr>
<img src='assets/img/ornament.png' alt=''>
</div>
Add the following to the stylesheet, replacing 16px by a suitable value that depends on the height of the image and the expected font size.
.hr { text-align: center; }
.hr img { position: relative; top: -16px; }
However, a better approach is to use just an image, centered inside a div element that has a suitable background image that repeats horizontally. The background image would be a piece that is of the same color as the overall page background but has a horizontal line in the middle.
Check out this fiddle. You can set the ornament image as a background on the div with the ornament class.
off the cuff...
using the center image for the hr and a repeated line segment for the div...
<style>
.line hr {height: 16px; background: url(as_image.jpg) center center no-repeat;border:0;}
.line {background: url(as_line.jpg) center repeat-x;}
</style>
<div class="line"><hr></div>
Related
I am building a webpage and I am attempting to add an image behind the container in the margins on the left, right and top.
The closest example of my current webpage is found in this demo: https://html5up.net/phantom.
I wish to ass a background image similar to the blue in this image: https://i.stack.imgur.com/NHbqU.png
So I want the image to be behind a floating page.
Well, add the background image for the body and add background: white (or whatever color you want) to the content container to avoid the body background "shining through".
Is the following code what you were looking for?
If so, essentially it is a background color for the "border", the above element having a margin.
body {
background-color: dodgerblue;
}
#content {
position: fixed;
background-color: #fff;
border-radius: 15px;
padding-top: 15px;
text-align:center;
height: 100%;
width: 88%;
margin: 25px;
}
<body>
<div id="content">
<h1>Wow!!</h1>
</div>
</body>
so my use case is that I have a div with a big background image and some other divs with text inside. In my css file I have a media query for max-width, so that below that width the image should disappear.
I have tried both visibility:hidden and background-image:none, but in both cases the text also disappears.
Is there a way to not make the other divs disappear? Or an alternative way to construct this structure to accomplish the goal stated above?
HTML:
<div id="teaser">
<span id="teaser-text"> Text </span>
<div id="attributes"> Some Text</div>
</div>
CSS:
#teaser {
width: 100%;
height: 0;
padding-top: 66.44%;
background-image: url('/static/main/freude2_bright1.jpg');
background-size: contain;
position: relative;
color: white;
margin-bottom: 20px;
}
Thanks a lot! :)
Is #teaser on a white background? If so, you're text may not be disappearing, but could be white on white after you've removed the image.
Try:
#media all and (max-width:480px) {
#teaser {
background-image: none;
color: #000;
}
}
If I understand correctly you want to remove the background image (or maybe color?) of a div but not effect the other content within it?
.main-div {
background-color: none;
background-image: none;
}
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
I have the following:
HTML:
<div class="banner-success">
<span class="banner-text">
You were successful! Yay! Some long reason what your success
implies goes here.
</span>
</div>
CSS:
/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
background-position: 5px 5px;
background-repeat: no-repeat;
min-height: 42px;
padding-left: 47px;
margin-bottom: 10px;
}
/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
color: #004400;
background-color: #DDF2E4;
background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/
.banner-text
{
position: relative;
top: 5px;
}
This allows for a standard banner, each with an image and arbitrary lines of text, assuming a consistent image size. My issue is that the div is being sized as if the text within isn't being pushed down, and so the bottom line of the text reaches outside of the div.
Is there a way to tell a div, or any container element, 'be as big as your constituent elements are, AFTER they've been relatively positioned to you'?
Apply overflow:hidden to the .banner-success.
I made a couple of tweaks to even out the padding around your text (and subbed a background
image so you could see it working w/ an image in place):
http://jsfiddle.net/qTsgL/
Cheers!
I have this image:
But i want to place text in the middle like this:
How can I achieve this?
I would like to do this in html, so I would use a <div> or a <span>
Using Pseudo Elements
The above could be created using the ::before and ::after pseudoelements of the containing element. For instnace, suppose we started with this:
<h1>Keep Calm and Stack Overflow</h1>
We could target the two pseudo elements, set their dimensions and background images, and get the same effect you are seeking above.
h1::before, h1::after {
content: ""; display: block; height: 3em;
background: url('ribbon.png') center center;
}
The above is a mere example of what you may write. For a fuller demo, please see this fiddle.
Using a Background Image (Original 2010 Answer)
Create a div that is the dimensions of your image. Then place your text inside. Use margins/padding on your text to get it vertically-centered, and set text-align to "center" for its CSS.
.imgBox {
width: 300px; height: 100px;
background-image: url('bg.jpg');
}
.imgText {
text-align: center;
margin: 0; padding: 25px 0 0 0;
}
<div class="imgBox">
<p class="imgText">Hello World</p>
</div>
You can also use absolute positioning and z-index :
<img src="yourimagefile.jpg" class="background-image" />
<p class="overlay-text">Your Test</p>
And in the CSS file :
.background-image { z-index: -1; }
.overlay-text { position: absolute; top: ??px; left: ??px; }
Some nice references :
http://www.w3schools.com/Css/pr_pos_z-index.asp
To me, this looks like an <img>, then some text in a <span> for example, and then a second <img>. If you put them all into a container that has text-align: center everything should be fine.
Create a div of the same width and height as your image and set the image as the background for the div using css. Put vertical alignment middle and horizontal alignment center on the div and add the text to it.