i am trying to attach custom underline to text-span, so it always follows the text.
<div class="title-wrapper">
<h1 class="main--title">This works like <span class="main--title-magic">magic</span> </h1>
<img src="./images/magic_underline.svg" alt="" class="magic--underline">
</div>
my goal is to attach image to span, couldn't figure out it yet, i was thinking using absolute position for image, but it won't be responsive , will it?
.main--title-magic::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background-image: url('./images/magic_underline.svg');
background-repeat: repeat-x;
background-size: contain;
}
This will create an ::after pseudo element, to the text span, with the ::after being an empty element but has a background image as the svg, and repeat it horizontally, it will always contain the full svg image and follow the text span and be responsive.
Related
I first used 'background-image' CSS property in a div to display the image due to the fact that it displays it properly as I wanted it:
The image is below the nav bar (allowing the shadow to be shown).
The image is an edge to edge but only accommodate less than 30% of the
screen height according to the user screen size.
The image allows a semi-transparent overlay for a title and
description of the image.
The image will fill(crop) to fit the canvas instead of stretching
out or shrink.
How do I transfer the 'background-image' CSS property in to HTML as tag? As CSS doesn't support alt text as they're required for me to pass the exam.
I've tried to add a tag into HTML and removed background-image
property from HTML (also ruleset name to accommodate the added img
tag) However, it doesn't display it correctly as I wanted it to be.
== THE CODE ==
Old code:
CSS:
.image-container {
padding-top: 10px;
width: 100%;
height: 48vw;
min-height: 380px;
max-height: 550px;
background-image: url('/assests/DisplayImage.jpg');
background-size: cover;
position: relative;
.image-container .detail {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 0;
text-align: center;
}
HTML:
<div class="image-container">
<div class="=detail">
<h1>
Title text
</h1>
<h3>
Description
</h3>
</div>
</div>
New Code:
HTML:
<div class="image-container">
<img scr=/assests/DisplayImage.jpg>
<div class="=detail">
<h1>
Title text
</h1>
<h3>
Description
</h3>
</div>
</div>
CSS: (.image-container .detail remain the same)
.image-container img{
padding-top: 10px;
width: 100%;
height: 48vw;
min-height: 380px;
max-height: 550px;
position: relative;
}
I expect it to be like this:
Expected (original result)
Instead I got this:
The result of changing the code
In addition to this, I also wanted my image to be focused on the center of the image when the screen is resized instead of just cropping the bottom.
Thank you. This might be too specific, but I'm sure that this will help those who also used a CSS background image instead of HTML tag.
Check this pen
There's nothing wrong in your code as I see.
For aligning image to center use
background-position: center;
If you are using img tag for image use below properties.
object-fit: cover;
object-position: bottom;
Why are you using background image ?
You can use this
<img src="// url " alt ="// text">
And then the css
img {
//css
}
I would like to place a smaller image with a transparent background in front of a header image in WordPress. The theme I am currently using allows me to set own css styles but I have no clue how to achieve my goal.
Has anybody already worked on this?
Thanks a ton,
Anton
Here is an example how to place an image in front of another image. I placed a PNG of a bee inside a banner image.
HTML
<div id="container">
<img id="banner" src="https://www.mortcap.com/images/sample_report_banner.png">
<img id="bee" src="https://orig00.deviantart.net/672c/f/2014/320/3/1/bee_png_stock_by_karahrobinson_art-d86m7bq.png">
</div>
CSS
#container {
position: relative;
}
#banner {
width: 600px;
}
#bee {
position: absolute;
z-index: 5;
top: 20px;
left: 20px;
width: 100px;
}
When we set position: absolute, that element will always be position relative to the nearest parent with position: relative (or absolute). And then you can refine the position of the absolutely positioned element using top, bottom, left, right css properties.
Play arround with this fiddle
So I have a div with content inside, but I'd like to cover that content completely with an image that is on top of everything else.
I'm using bootstrap if that helps
<div class="jumbotron">
<div> I have images and paragraphs inside of me </div>
<div> I have images and paragraphs inside of me </div>
<div class="clearfix"></div>
</div>
I tried setting a background image to the jumbotron, but that put the image behind everything else, instead of on top. I tried a few other things, but everything messed up the existing layout that should exist underneath the covering image.
You could position the image absolutely to cover the text.
.jumbotron{
position: relative;
}
.jumbotron img{
position: absolute;
}
You could also use a background image in this situation as well if your text is way too large. This is kind of goofy but the requirements here are kind of goofy:
.jumbotron {
position: relative;
height: 100%;
width: 100%;
}
.jumbotron img {
position: absolute;
}
.jumbotron .covering{
position: absolute;
height: 100%;
width: 100%;
background-image: url('http://lorempixel.com/400/200/');
background-size: cover;
}
You can just set the same CSS positioning and sizing rules to both the image and the text and make the z-index of the image higher than the text.
So I have a link with an image:
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" rel="prettyPhoto" title="">
<img src="../gs1.jpg" alt="YouTube" />
</a>
and the link has a background image:
<style>
a {
z-index: 99999;
background-image:url('../play-button-red#40.png');
}
</style>
The background image is not being displayed. If I blank out the image url for the link-image, I do see the background, it's just once the link-image is visible it blocks the link-background-image.
Is what I'm going for possible? If so, any advise would be much appreciated.
A background image is what the name implies - a background image - and hence it can not be drawn on top of the elements' content.
Looking at your code I assume you want to display a play button on top of a thumbnail. And I'm assuming the play button is transparent.
I would use this CSS:
a {
display: inline-block;
position: relative;
}
a:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: 50% 50%;
background-repeat: no-repeat;
background-image: url('../play-button-red#40.png');
}
Relative positioning of the anchor is very important as this generates the basis for the ::after pseudo element to properly position and size itself.
No z-index is required as ::after pseudo element comes after the content in the document flow and is thusly rendered on top of the content with the above CSS.
I would strongly recommend assigning classes to anchors in question, as it is doubtful you wish to show the play image for every a in the document.
HTML is fine as it is.
I made a working example for you:
HTML:
<a href="#">
<img src="https://cdn3.iconfinder.com/data/icons/social-circle/512/social_4-128.png" alt="YouTube" />
</a>
CSS:
a {
width: 200px;
height: 200px;
display: block;
z-index: 99999;
background:#000 url('http://jsfiddle.net/img/logo-white.png');
}
FIDDLE
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.