I have two images, one on the left and one on the right. I am facing issues in writing text onto both images.
I am pasting HTML code and CSS code. Please correct it.
#container {
width: 400px;
height: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 999999999;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
}
<div id="header">
<img src="images/banner-img1.jpg" class="left">
<p id="text"> jhcjdhdjshdjdhjd</p>
<img src="images/banner-img2.jpg" class="right">
<p id="text"> jgdhdgdhddhhsd</p>
</div>
Both of your paragraphs refer to the same ID, but ID's must be unique. Try using a class here instead.
.text {
...
}
and
<p class="text"> ... </p>
Also, you use class="left" and class="right" on your image tags, but these classes don't yet exist in your css code.
Create a container for the image and make it’s position relative. (to get along with the rest of the page)
Place the image within the container.
Place the text immediately below the image within the container and make it’s position absolute (to overlay text on the image) and place it as you please.
Finally, add some CSS tricks to suit your needs.
Related
I'm building a gauge which uses pure CSS. It has a background to clip the remainder of the progress colour from showing. I want to add another div on top which gives a text indication of the progress: "10%".
It seems like no matter what I do, I end up with the background clip covering my text.
I've got an example of the problem here:
https://svelte.technology/repl?version=1.60.3&gist=77e1b55c23e229dee8d45b5648610593
An extremely cut down version of my code, demonstrating the problem is as follows:
<div class="gauge-wrap">
<div class="gauge-core">
<div class="gauge-bg" style="background-color: #fff;">
<div class="gauge-bg-value">10 %</div>
</div>
<div class="gauge-cap" style="background-color: #000;"></div>
</div>
</div>
<script>
.gauge-bg-value {
position: relative;
color: #f0f;
top: 7px;
z-index: 6;
}
.gauge-wrap {
position:relative;
margin:0 0 20px;
}
.gauge-bg {
position: absolute;
width: 200px;
height: 200px;
border-radius:100px;
z-index:0;
}
.gauge-cap {
position: absolute;
top:16px;
left:16px;
width: 168px;
height: 168px;
z-index:5;
}
</script>
It seems like z-index: 0 is still on top of my text div (.gauge-bg-value), even though I've given it a higher index.
Update - Solution:
In building my example, I moved the text into the .gauge-cap div and now it sits on top. Perhaps it was that div covering it all along. Happy to hear solutions that don't modify the structure of the html though.
This is to do with stacking context. In a case like this...
<div class='foo'>
<div class='bar'></div>
</div>
<div class='baz'></div>
...if foo and baz both create stacking contexts, and baz has a higher z-index than foo, then bar can never appear above baz no matter what. You'll have to break your markup apart into different layers instead (though in your example, I think you'd have an easier time using SVG instead of HTML).
As far as I know I can't directly change the opacity of a background image but using ::before and ::after doesn't seem to let my image show up. Am I doing it wrong?
HTML
flower window boxes
All of our products come in virtually any length up to 16 feet and two sizes. Our standard size boxes are designed to accommodate almost any flower. Our XL sizes are taller and deeper to provide more root space for plants making them the ideal sized window boxes for plants.
</div>
<div class="card-back">
<h2 class="click-here"><b>Visit Site</b></h2>
<div class="info">
<h2 class="info">Email:</h2>
<h2 class="info">Phone:</h2>
</div>
</div>
<!-- Content -->
<div class="all-content">
<h1>Contrary to popular belief</h1>
</div>
</li>
Current CSS
.content li:nth-child(1) .card-back{
background-image:url(../images/sponsor-imgs/Cellular%20PVC%20Columns-Kingston-1.jpg);
width: 100%;}
What I've tried
.backimg::after {
background-image:url(../images/backimg/wide.png);
opacity: 0.5;
}
.backimg::before{
background-image:url(../images/backimg/wide.png);
opacity: 0.5;
}
div::after {
opacity: 0.5;
}
On a side not i know i can simply make the images themselves transparent, but i feel like a code to do it much more useful in the long run. thanks in advance.
::before and ::after require a content property. You can set it to an empty string but it must be included.
In most cases you also need to define a display property and assign some dimensions to the element (unless you are using something like position: absolute; top: 0; bottom: 0; left: 0; right: 0; - in which case, you don't).
.backimg {
background: red;
}
.backimg::after {
content: "";
display: block;
width: 200px;
height: 200px;
background-image: url(http://placehold.it/200x200);
opacity: 0.5;
}
<div class="backimg"></div>
You are missing the .backimg class in your html.
Dont use double :: and add content and display properties to after. Also some dimensions wouldnt hourt (width,height)
.class:after{
Cintent:"";
Display:block; // change as you see fit
}
I want to put text in "p" into center of my "div". My html is like this:
<div class="picture">
<img src="/sites/default/files/default_images/colorful-triangles-background_yB0qTG6.jpg" width="1080" height="1920" alt="background to view" typeof="foaf:Image">
</div>
<p class="textik"">Hello handsome.</p>
But i cant change html tags. I can only us CSS. Is there a way to do this? I tried some ways, but none seems to work.
The only way to do this without changing the HTML is to artificially align the p tag above the div tag like so.
p.textik {
margin-top: -5px;
}
Adjust as needed, and test for mobile devices.
If you don't want the elements underneath to move up as well, you can use either padding-bottom to prevent this.
p.textik {
padding-bottom: 5px;
}
I'm assuming you actually want to make the p tag appear in the centre of your image, so you can position it absolute and transform it's location using css. By using absolute positioning and transforming the location you don't need to reposition should the size of your image/outer elements change. Something like:
<div class='someOuterElement'>
<div class="picture">
<img src="http://placehold.it/500/500" width="500" height="500" >
</div>
<p class='textik'>Hello handsome.</p>
</div>
and style it with:
.someOuterElement {
position: relative;
width: 500px
}
.textik {
text-align; center;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%)
}
There's more info about css transform here
I have the code below to display the image and the code as a hyperlink. But I would like the image placed behind the text and person can click on either
<h1>test</h1> <img scr="#"/>
Use CSS to achieve this:
test
Here you can see more info about background-image: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
You have syntax error in your code, you must use <h1> outside the <a> tags, like this:
<h1> test </h1>
You can also use position: absolute so the text will be on the top of the image.
HTML
<a href="#">
<h1>test</h1>
<img src="http://spi3uk.itvnet.lv/upload2/articles/54/542197/images/Jauka-vasara-8.jpg"/>
</a>
CSS
a {
position: relative;
}
a h1 {
position: absolute;
z-index: 100;
color: #FFF;
}
Demo Fiddle
I recommend you to use background:
<h1>test</h1>
But if you want, you can use another variant (negative margin):
<h1 style="height: 24px;">test</h1><img style="margin-top: -24px;" src="..."/>
Or absolute position:
<h1 style="position: absolute; z-index: 9;">test</h1><img src="..."/>
P.S. You have some typos in code: scr -> src and <\h1> -> </h1>
Well, it depends how you'd be using this.
Either set is as a background image instead of adding an img-tag.
But that would mean you'd have to set the height. Otherwise your image would crop.
...or you can set the (wouldn't use h1 in this case for semantic reasons) span with the text to:
CSS
span {
display: block;
position: absolute;
}
and then position it wherever you want inside the image.
I'm unsure if this is the correct approach, or even question, so I will elaborate.
Please visit this live page http://thedinnerparcel.co.uk/index.php?option=com_content&view=article&id=22&Itemid=3
I am basically asking if it is possible to overlay a link somewhere in the header div? Specifically over the sticker background image on the right?
I didn't build the site, but I have just added the sticker to the right corner of the header div. (FYI it's a Joomla site so uses a PHP template file.).
I did this as a background image and used some padding and negative margin to make it overflow, then I realised the sticker needs to link to their order page.
Would an image map be the best way to make this into a link? Or is there a better method?
If an image map is the way has anyone got a code example.
I've tried the below code, which I edited from a tutorial on a similar subject, this doesn't work
<div id="header" usemap="#Image-Maps_2201202140621298">
<map id="Image-Maps_2201202140621298" name="Image-Maps_2201202140621298">
<area shape="rect" coords="0,0,275,44" href="#" alt="Dinner Parcel" title="Dinner Parcel"/>
</map>
</div>
Paste the following code as is and it will work for you
Append a <a> to the end of your header div:
<div id="header">
<div...
<div id="menu">...
<a class="my-map" href="#"></a>
</div>
And then add the following styles:
#header{
position:relative;
}
.my-map{
width: 190px;
height: 190px;
display: block;
position: absolute;
bottom: 26px;
background: #EEE;
border-radius: 95px;
right: 2px;
}
I don't know how popular imagemaps are anymore :). You can position the element absolutely relative to the header with the following (for example). Codepen sketch: http://cdpn.io/klsEp
HTML
<div class='header'>
<a class='sticker'>Click me</a>
</div>
CSS
Consider this simple example.
.header {
background: green;
height: 200px;
position: relative;
width: 800px;
}
.sticker {
background: red url('..') no-repeat center;
bottom: -20px;
color: white;
cursor: pointer;
display: block;
height: 100px;
position: absolute;
right: -30px;
width: 100px;
}
.sticker:hover {
background: black;
}
In your HTML, I cannot find the link to menu_bg6.png, but that is where you must put the usemap= tag, as in:
<img src="menu_bg6.png" alt="an image" usemap="#usethismap">
So, not on the DIV tag, but on the IMG tag.
Then you can create a corresponding <map> tag and it should work for you (although, don't forget to insert a URL for the click to action - currently yours is '#').
Here is a simple jsFiddle with more ideas for positioning clickable areas over an image.
Here is an article that discusses how to create pseudo "image maps" for DIVs - without an IMG tag.