hello i'm trying to put text below a background images. like here i want place two background images side by side and below each image i wanna place text. i have take one div class it has styles inline block property. so how i can do this with the help of or using inline block property.i have explained my problem as much as i can. if it is possible then please go through my fiddle link. i have tried by this properties but text is overlaping on the image i want that below the image also check similar questions no one has done with background image so please check out my code what i have tried it is given in the comment box. please help me thanks. :)
You haven't set a css property for your paragraph tag within your imgcontainer.
In my fiddle, I added the following :
.imgcontainer p {
position: relative;
top: 100px;
}
I also added a background-size to both of the background images. I used background-size: cover; (I replaced the image urls with ones that I have in my image folder on my website)
https://jsfiddle.net/RachGal/f0fsLd2h/ :Fiddle
I hope this was what you where looking for.
Here is a link to an updated fiddle:
Fiddle
If you change te background-color to an image, it should still work
I simply added:
.imgcontainer p {
position: relative;
bottom: -90px;
max-width: 100px;
}
To the paragraph
Related
Looking for assistance in modifying a WordPress page template that allows users to submit a listing/post of a venue and include a image that is used as a background image. The issue is that when a user submits an image using the custom field called "listing_banner", depending on the background image submitted with the listing by the user, the image submitted may make it difficult to read the white text in from of the background image. Here is a link to a sample listing: http://www.myvipclubs.com/test/city/detroit/listing/v-at-mgm-grand-detroit/
Looking for assistance to add one of the following to the existing code:
an additional div tag that refers to the Wordpress custom css file that includes a css element that points to a transparent image (.png) that can be placed in front of the listing_banner image when a user submits the background image (http://www.myvipclubs.com/test/submit-listing/).
Issue: When using div class .full_detail_overlay_image, the transparent image is over the listing_banner image and the text. Only want the image to be darker, not the text. Assuming need to have a class where it clears the css style and does not affect the text.
Modify the existing css. style for the background image (.full_width_detail) that includes a filter to change any image submitted by the user.
Using either possible solution looking for someone to assist in getting the right code using either css or a transparent image as an overlay.
You don't need an extra div element, you can do this by making use of a before or after pseudo element.
I've very quickly put together an example jsFiddle using the css below.
.full_width_detail:before {
height: 600px;
background-image: url(http://images4.fanpop.com/image/photos/16100000/Cute-Kitten-kittens-16122946-1280-800.jpg);
background-size: cover;
position:relative;
padding: 50px;
}
.full_width_detail:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.15);
z-index: 1
}
h1 {
text-align:center;
color: #fff;
z-index: 2;
position: relative;
}
You'll need to make sure that your div element is relatively positioned and that the pseudo element .full_width_detail:before is absolutely positioned and given a z-index higher than that of the div so that it sits above.
In this example I've used an rgba background for the :before element. The .15 value can of course be changed to make the tint more opaque should you wish. If you really must you can use a transparent png instead of the rgba background, but personally I like to use rgba with a fall back if I need to support older browsers.
The content of the div in this case the text needs to be relatively positioned and have a z-index higher than .full_width_detail:before.
I have a banner-image, on that image I've placed a link. This page is not getting aligned properly when I zoom-in or zoom-out the browser window or when I resize it.
The link is not getting aligned properly with respect to the image as it was showing in the default view(100% zoom ).
How to make this link responsive? I want the Read More button to be aligned exactly below the text Driving Value creation with ..... text, and the Read More link to be responsive with respect to the image on which it is present. How can I do that?
Here's my JSFiddle
<p class="homeImageLink">
<span>Read More</span>
</p>
Please help.
I am not sure this will work, but I think it would:
.image_container span
{
margin-left:-100px;
}
DEMO
DEMO1
You need to tweak your css so that the positioning is a bit more clear, I've fixed it somewhat here.
The important parts are here:
.image_container {
position: relative;
}
.homeImageLink {
position: absolute;
bottom: 10%;
right: 3%;
}
On the container, position: relative; means that any internal positioning will work from this container. Any positioning apart from static would do here and it's important no intermediate elements in the tree have position set or it will work from that element instead.
The the link container itself is position: absolute; with % values used to keep it proportional to the size of the container. Note also that right is used instead of left so the element appears relative to the right of the container. Now it will never go off the right hand side of the image.
To make this clearer I've removed all the other css from the example and as you can see it still demonstrates the effect you desire.
Hoping someone can help.
My page is here:
http://www.simplypsychics.com/psychicprofile.php?pin=4439
Basically what I want to do is position an image in specific dimensions where RED is (in my picture below).
However, I tried to place it where the 'Psychic Name' is as an with align="right" but it moves by tab content down.
Does anyone know how I can put it in, maybe as a DIV, so it's always above everything and in that very place as in my picture here:
http://i60.tinypic.com/2hmmvrl.jpg
I don't know what code I need to look at. :(
I assume you're talking about the "profileimg" that's currently overlapping the text.
Just use this css:
.profileimg {
height: 118px;
float: right;
}
No need to use absolute positioning, floating the image to the right gives you the effect you need.
Add this to the css of your "content" div (the div that contains the topic, the red picture, the form and so on ... but not the "other psychics content)
position: relative;
And add this to the div that contains your picture
position: absolute;
top: 0;
right: 0;
If the position is not exactly what you wanted, you can change the position by change the values from top and right. If you do this, don't forget to add unit "px" (e.g. top: 10px;).
Hope that helps.
You can make the following CSS properties on .profileimg
.profileimg {
height: 118px;
position: absolute;
margin-left: 18%;
}
I'm not saying that it's a great soloution but if you don't really know CSS then it's probably a quick fix until someone proper can look at it.
I'm trying to make a navigation with a couple Image links with background images. If I make the links divs calling to the images, they show up. But when I make the links calling to the same class the background image disappears. Any help appreciated
CSS
#advertising {
z-index: 1;
width: 465px;
height: 65px;
display: block;
position: absolute;
background: url('../images/advertising.png');
}
HTML
1) You should probably give it a top, left ... values for the position.
2) try absolute path of the image.
3) try setting the position of one of the element containers to relative.
4) Disable ads filter :)
In one of my project, I have a similar problem. If I called my css like this "css/medium.css", it doesn't work. I had to called it with a slash in the beggining "/css/medium.css"
I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>