I am having problem with placing text below background image, I did play with CSS but no luck text is not moving to next line below image.
Here is my HTML
<a class="bgimg">placing text below background image </a>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
}
I wanted to have background image at top and text below the image.
can anybody suggest me please ?
The key is in top padding, so you need:
padding-top: 20px;
Also, since it's an anchor which is inline by default, you need to set it to inline-block (setting it to block might cause text flow issues):
display: inline-block;
And that's it, see an example here: http://jsfiddle.net/2Log20b4/
At that point, why not Just separate your elements a bit?
<div class="bgimg"></div>
<p>placing text below background image </p>
<style>
.bgimg{
background-image: url('images/HBR_compact_black_text_red_shield65x31.png');
background-repeat:no-repeat;
width: 65px;
height: 31px;
}
</style>
the alternative would be to use text-align on your anchor (but you'd have to set the anchor to display as a block element first)
If the height of the image is unknown, you could use CSS generated content with a url() value as follows:
.bgimg:before {
content: url('http://placehold.it/100');
display: block;
}
.bgimg {
text-align: center; /* align the image to center */
display: inline-block;
}
<a href="#" class="bgimg">
placing text below background image
</a>
It's worth noting that generated content is supported in IE8 and newer.
Related
In this link it looks like a button
<div class="button-row">
</span>
</div>
The css
.button-row {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
}
.arrow-right {
background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
}
The image is not visible on the button , but I see it on the inspector, I don't know what the problem is.
Try to put some min-height and min-width (or) height and width. since it is a inline element also no content inside.
Try below in your code
.arrow-right {
background: url('#{$iconsImagesPath}black-right-arrow.png') no-repeat;
display: inline-block;
min-width: 200px;
min-height: 200px;
background-size: 100%;
}
UPDATE
Since you are using Bootstrap buttons, you are limited to the confines of the Bootstrap Button Classes. I have seen that you can use the <button> element with an image tag inside, but I'm not sure if that still works in bootstrap 4.
Can you try the code I updated in my answer (using :before and two classes).
If this doesn't work, remove the other classes on your anchor tag and add width and height to .arrow-right. Once you see the image, start adding classes until it disappears again, then you know what you need to troubleshoot.
HTML
<div class="button-row">
<a href="<% url('/') class="btn-link btn-blue mbright {!! t("profile.unsuscribe_button_yes") !!}
<span class="arrow-right arrow-image"></span>
</a>
</div>
CSS
.arrow-right:before {
display: inline-block;
background-color: transparent;
background-position : center center;
background-repeat:no-repeat;
}
.arrow-image:before {
background-image: url('#{$iconsImagesPath}black-right-arrow.png');
}
The root cause of the problem is the empty span that has a background image.
By default, the width and height of an empty span will be 0px. This causes the image to get hidden.
The easy way to fix this problem is by assigning the height and width attributes to the span.
Here is an example for making the background image of a span visible when the span is empty:
<div class="button-row">
<a href="link-url-here">
<!-- Set span dimensions to 20x20 to make the background visible -->
<!-- Also, disable background repetition to show the image only once -->
<span class="arrow-right arrow-image"
style="height: 20px; width: 20px; background-repeat: no-repeat;">
</span>
</a>
</div>
I always wondered if this was possible without JS.
This is one of those situations where you can see that there is still a gap between devolpers and designers, hope we can help close it here :)
Here is a great explanation of how to do it (but for elements smaller than the container only)
http://css-tricks.com/centering-in-the-unknown/
//HTML
<div class="something-semantic">
<img class="something-else-semantic" src="wtvr"></img>
</div>
//CSS
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Best solution I've used as of late is half-hack, half-awesome.
<div class="something-semantic" style="background-image: url( {{src}} )">
<img class="something-else-semantic" src="{{src}}" />
</div>
//CSS
.something-semantic {
position:relative; /* or something other than static */
background-repeat:no-repeat;
background-size:contain;
background-position:center center;
}
.something-semantic img{
width:100%;
height:100%;
opacity:0;
}
So for an image gallery, I'd inject the image src into inline background-image property and the <img> src attribute.
Making the REAL image completely transparent (but still visible), allows for alt tags, title, etc. Using background property lets you constrain the image dimensions to whatever size container you'd like.
the images top and left corners will always be flush with the container div, unless you know the size of the image and can give it ax explicit negative margin.
example fiddle http://jsfiddle.net/rHUhQ/
depending on the situation you can just give the image a class that styles it how you want since apparently it's container isnt that important (if it can be covered by the image in the first place).
I've got some linked images centered in a div. After the last image, I want to add a text link. For some reason, the links don't wrap around the images, they sit below the images, meaning my text link at the end is in line with the previous links, below the images themselves. What I want is for the text link to be at least in line with the images.
Check out the JSFiddle: http://jsfiddle.net/RFzMv/
If I float the links around the images, then they are the same size as the image and everything works as expected, but then the images aren't centered in the master div. The number of images can change, as can their dimensions, so I can't set them using absolute or anything like that.
How can I get the link to be the same size and position as the image it surrounds without using float, so the following link is in line with the images?
The HTML is nearly the same as yours except for the third child div. I wrapped the text in a <span> div and then that is contained by the a.imageCount link.
<div class="centered">
<a class="image-link" href="">
<img src="http://placekitten.com/100/100" width="100" height="100" />
</a>
<a class="image-link" href="">
<img src="http://placekitten.com/110/110" width="100" height="100" />
</a>
<a href="#photos" class="imageCount">
<span>some text</span>
</a>
</div>
The CSS looks like this:
.centered {
width: 500px;
height: 300px;
background-color: #EEE;
text-align: center;
}
a {
text-decoration: none;
outline: 1px dotted blue; /* optional to show content boxes */
}
.image-link {
display: inline-block;
vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
display: inline-block;
border: 1px solid blue;
padding: 5px;
border-radius: 5px;
background-color: lightgray;
margin-left: 10px;
}
.imageCount span {
/* in case you need to style the text in a special way */
}
You can see the demo fiddle at: http://jsfiddle.net/audetwebdesign/uBVHC/
How This Works
Basically you have three inline block child elements in div.centered, so text align works as you expect.
I assume that one of the images will be the tallest element in the line and that you would like to have some control over the positioning of a.imageCount.
If you apply the vertical-align property to .image-link, then that will determine how the images are aligned vertically with respect to the a.imageCount element. You can try out the three principal values (top, middle, bottom) and pick one that suits the design you want.
If you want to adjust the top (or bottom) position, simply use a top (or bottom) margin on .imageCount and display: top (or bottom) on .image-link.
You can adjust the horizontal separation you a left margin on .imageCount.
If you have a container div that is position relative then you can have a div inside it with position absolute that is positioned relative to the containing div and not the entire window.
This would let you keep your centered images while placing the link anywhere you want.
#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }
here is a fiddle:http://jsfiddle.net/RFzMv/39/
I've added all my icons into a sprite.
Now, I need to show one icon from that sprite with a link.
When I add the sprite and set its background position on the link all of the link's background is the sprite sprite.
a{
background-image:url('sprite.png');
}
.sprite_link_icon{
padding-left: 20px;
background-position: -36px -10px
}
<a class="sprite_link_icon" href="">test link test</a>
How do I set the sprite's width and height, so that it shows only one icon?
Is the only way to add two divs in the "a" tag? First, the div with sprite icon and width and height set, and in the other text?
<a href="">
<div class="sprite_link_icon" style="width: 10px; height: 10px;"></div>
<div>test link</div>
</a>
You could use :before or :after to move the actual background to another (pseudo-)element that is exactly the right size of one icon.
Something like this:
.icon {
/* nothing special here, just a dynamic element,
maybe with a fixed height? */
}
.icon:before {
content: '';
display: inline-block;
height: 16px;
width: 16px;
background: url(...) etc;
margin-right: .25em; /* might not be necessary due to inline-block */
}
A fiddle: http://jsfiddle.net/rudiedirkx/RG3Kd/ (with wrong sizes, because I don't have a good sprite handy).
You can't do it like, when you are doing sprites you should have mind how much will the width and the height of the element will be.
You can get out of the problem when you add a span in the "a" tag and add the backgroud to it, with specific width and height. Or you can rearrange your sprite.
Use this code in style:
a
{
background-color:#00cc00;
padding-left:20px;
}
a span
{
background-color:#fff;
}
then this html:
<span>test link</span>
I have a webpage written in dreamweaver. I have my buttons as part of the background image and use a href to provide functionability to those buttons. However when I zoom in or out with my browser those a tags move and the buttons in the background no longer align with teh a href tag. Is there any way around this?
Thanks
You need to slice those image buttons seperately, whether it's using Photoshop, GIMP or whatever you want and save them in your images folder. Then you can either use the <img> tag or have a <div> with a background using that image and set the "a href" on that.
So you could do either of these:
<img src="url" alt="some_text"/>
OR
html:
<div id="image"></div>
css:
div#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
To have them placed where you want on the page, you would have to place them in a div and then use css to add a margin or padding to be placed where you need it to be. So if you use the first option and you want it to be on the bottom right of a specific div, you would do this:
html:
<div id="specific_div">
<div id="image">
</div>
</div>
css:
#specific_div{
height: 400;
width: 400;
}
#image{
background-image:url('image.gif');
/* height and width of image */
height: 150px;
width: 200px;
}
#specific_div #image{
/* placement on page */
float:right;
margin-top: 150px;
}