I have a button that contains text and an image illustrating a click event. I understand it is feasible to display an image as a background on the button.
CSS:
.upperLeftButton {
display: inline-block;
background-image:url(Images/checkmark.png);
height:50px;
width:200px;
}
HTML:
<asp:Button ID="checkInButton" runat="server" Text="Check In" OnClick="checkInButton_Click"/>
Is there any way to display the image and text side by side within the button?
Yes...use background-position but that will depend on the look you are going for...which we can't tell without the actual image.
Quick demo...
.upperLeftButton {
display: inline-block;
background-image: url(http://lorempixel.com/output/abstract-q-c-25-25-7.jpg);
background-repeat: no-repeat;
background-position: center left 25px;
height: 50px;
width: 200px;
}
<button class="upperLeftButton">Check</button>
Add an img tag inside the button
Because the button element can contain inner HTML content, you may use an img tag as an alternative to setting a background-image in CSS.
img {
margin-right: 5px;
vertical-align: middle;
}
button {
padding: 5px;
}
<button type="button">
<img src="http://placehold.it/30" alt="Place Holder" />
My cool button
</button>
Add padding-left: 30px (or whatever width of checkmark.png is) and background: url(images/checkmark.png) top left no-repeat to button CSS, so it will offset the text, but leave icon in left corner.
EDIT: also, must likely you should add padding-top: 10px (or so) as well, so text is centered vertically in middle to icon as well.
Another idea is to redesign (even with simple paint) background and add 'blank' space for text and place it there with css.
.button{
background-image: url('http://community.avid.com/cfs-filesystemfile.ashx/__key/CommunityServer.Components.PostAttachments/00.00.53.19.51/WhiteBlack10801440x1080.png');
background-size: cover;
width: 200px;
height: 50px;
text-align: left;
padding-left: 32px;}
Like in fiddle here:
https://jsfiddle.net/pp719t5n/
Black space is your image and white space background for your text.
Related
I am trying to place an image on my site. But the image is crossing the div border and going out and thus making the website horizontally scrollable.
I have use the float tag in css.
here is my css code
.image-2{
width: 40%;
display: block;
float: right;
padding-right: 50px;
}
my did style sheet
.about{
display: block;
width: 100%;
height: 750px;
background-image: linear-gradient(to top right, #130178, #4F35DF, #5FD0F5);
}
How can I keep the image fixed inside the div and stop it from going out and increasing the width of the site?
Use max-height:100%; max-width:100%; object-fit: contain; for the image inside the div.
add width: 100%;to the image. then image inside parent element
I've made a span composed of an image and text, using the following HTML code. And I'm trying to align that text next to the image, using the following css class:
span.my-profile {
background-image: url('http://placehold.it/450x100/fc6');
background-position: left center;
background-repeat: no-repeat;
padding-left: 16px; /* Or size of icon + spacing */
text-align: center;
}
<span class="my-profile">My Full Name</span>
However, That didn't work as expected. And the text is still aligned to left as the image. So what's wrong with my code? and how is it possible to align the text to the center?
Thanks in advance.
Adding the background image to the same span with the text will only place the image as the background of the span with text.. try placing the image as a separate element in the span using <img /> tag. You can then control the image and the text using either display:inline-block or float in css.
Use a pseudo-element :before to place the image (change the width, height and margins):
span.my-profile:before {
content: "";
display: block;
background: url('/img/no-face.png') no-repeat;
width: 20px;
height: 20px;
float: left;
margin: 0 6px 0 0; }
Try to play with some width-height, padding and display:block properties, it will work.
check this fiddle here
Try to use css style like below
span.my-profile{
width:200px;
height:100px;
display:block;
background:url(http://placehold.it/200x100) no-repeat;
padding-top:100px;
text-align:center;
}
I have some stylized circular buttons, and I've noticed that, when displayed inline with other elements, they're aligned as though they are nothing but text. The text "button" is aligned with the image in my example, but the actual area of the button hangs below. This not only looks weird and seems unintuitive, but it pushes down the bottom margin of the entire line of elements!
I've tried several things to get the bottom edge of the button to align with the bottom edge of the image, but nothing is working. This does not seem like it should be a difficult problem.
button {
height: 64px;
width: 64px;
border: outset 8px #999;
border-radius: 64px;
}
<button>button</button> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto">
You could set vertical-align: bottom; on the img tag.
button {
height: 64px;
width: 64px;
border: outset 8px #999;
border-radius: 64px;
}
img {
vertical-align: bottom;
}
<button>button</button> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto">
This is due to vertical alignment. Your image and button are both vertically aligned to the baseline (the default), which sets the button's text to the baseline of the container which, unfortunately, causes it to drop below the bottom of the image.
If you draw a line below the bottom of the text and the bottom of the image, you'd see they line up: their baselines are the same.
The image is the culprit here. Setting vertical-align: bottom on your image will do the trick.
CSS Tricks has a good write-up of these types of problems.
You can centrally align both with this snippet.
CSS:
button {
height: 64px;
width: 64px;
border: outset 8px #999;
border-radius: 64px;
vertical-align:40px;
}
img {
vertical-align: bottom;
}
HTML:
<button>button</button> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/RCA_Indian_Head_test_pattern.JPG/312px-RCA_Indian_Head_test_pattern.JPG" height="100" width="auto">
take a look here
I have a query in relation to images, using just html and css (if possible).
I would like to have an image (e.g wallpaper image of a city at night) transformed into a circular shape with a surrounding border.
Hopefully i would use this image also as a button, and add text to it.
So for example a picture of a football stadium in the middle, circular in shape. Surrounded by a small border. When you click on the image (which will have text on it) you are transferred elsewhere...I will have 4 of these in a line on my poage.
Thanks
All help in this matter would be greatly appreciated
<div class="circular"><a></a></div>
.circular {
border: solid 1px
width: 300px; //edit this
height: 300px; //edit this
border-radius: 150px; // a half of width and height will cause a circle
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(http://link-to-your/image.jpg) no-repeat;
}
Just answering your position question, check the answer here https://stackoverflow.com/a/19461564/2012904
The flexbox is a good method.
See this demo
HTML:
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
<a href="#" class="round">
Click Me!
</a>
CSS:
.round{
display:table-cell;
width:100px;
height:100px;
border-radius:50%;
overflow:hidden;
border:2px solid #cc0000;
background:url("http://www.placehold.it/100x100");
vertical-align:middle;
text-align:center;
}
Using the css property border-radius you can round the edges of an element. If you use border-radius: 50% you will end up with a circular image.
So, if you had the following HTML:
<img src="some.url" class="circle">
and the following css:
.circle{ border-radius: 50%;}
You will end up with a rounded image. In order to have a circular image, the dimensions of the element that border-radius is being applied to must be square. So, you will need to set a height and width property in the css as well.
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
}
You should be aware if you are not using a square image and are applying the dimensions directly to the image, you could end up stretching or smushing the image.
To add the border to the image, you need to include the border property in your css:
.circle{
border-radius: 50%;
height: 150px;
width: 150px;
border: red solid 2px;
}
Alternatively, you could just create a button element and add the image as a background image to that element like this:
//html
<button class="circle"></button>
//css
.circle{
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius: 50%;
border: red solid 2px;
height: 150px;
width: 150px;
}
This will create a button element with a background image from the url specified. The background-size property will ensure that the image is always large enough to cover the button. The background-position will center the background image inside the button so that the portion of the image that is shown on the button will be from the center of the background image.
This might be a better option for you since you can change the background-position property to position a background image and keep the focus of that image in the center of the new circular element you have created.
In order to use the round image as a button you have a few ways you can go. The best would be to use pure javascript or use jQuery to select the rounded element and add a click event handler.
You could also wrap the rounded element in an <a> element and simply turn the rounded element into a link. Like this:
<button class="circle"></button>
In this case, you could remove the button if you wanted:
However, make sure you then add display: block; to your css for the .circle class:
.circle{
display: block;
background-image:url("http://upload.wikimedia.org/wikipedia/commons/7/71/St._Bernard_puppy.jpg");
background-size: cover;
background-position: center center;
border-radius:50%;
width: 150px;
height: 150px;
border: red solid 2px;
}
i'm new to css sprits. i have added a small red color arrow like image to all links in a DIV ID. it looks like this.(image attached)
how to get some padding after the background image ? i mean some space between image and text using CSS.
CSS
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
height: 12px;
display:inline;
}
HTML
<div id="maincontent">
Btech III
</div>
i tried adding to css padding right, but it is giving some space after text not after image.
You want to use padding on your link, this will leave the background where it is but move the text, try padding-left: 25px;. But adding padding will add to the width so you will want to adjust the width of your link and reduce it by the amount of padding you have added (maybe not in this example)
Also your example image isn't loading
Try this:
#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
padding-left: 25px;
height: 12px;
display:inline;
}
just apply a padding-left or a text-indent to your link