I have a Button with a background-image and a text that is more than the width of the image.
How to place the image in the middle of the text
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background: url('http://127.0.0.1/pics/item/c1763.png') no-repeat;
background-size: 100% 100%;
border: none;
color: black;
font-size: 16px;
width:60px;
height:60px;
padding-top:60px;
white-space: nowrap;
background-position: center center;
display: flex;
}
</style>
</head>
<body>
<button class="button">Button text test</button>
</body>
</html>
Button image
Hope this help you.
.button {
background: url('https://i.stack.imgur.com/GxHaN.jpg') no-repeat;
background-size: 100% 100%;
border: none;
color: black;
font-size: 16px;
width: 60px;
height: 60px;
white-space: nowrap;
background-position: center center;
display: flex;
}
<button class="button">Button text test</button>
The final solution is determine the actual width of the image and to specify the width of the button for the text
.button2 {
background-color: transparent;
background-image: url('http://127.0.0.1:25005/pics/item/c1763.png');
background-size: 60px 60px;
background-repeat: no-repeat;
border: none;
font-size: 16px;
height: 60px;
width: 150px;
text-align: center;
padding-top: 60px;
white-space:nowrap;
background-position: center top;
}
Related
I'm using the background-image prop to get an image in the bg and a text on the foreground:
fiddle:
https://jsfiddle.net/zvy0j3r1/5/
however I dont see any image getting displayed. i'm not sure what I'm I missing here
CSS:
.main {
padding: 40px 70px;
display: inline-block;
width: 100%; //customizable user controlled width (not necessarily be 100% all time)
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
Just set the .main as relative and .icons as absolute.
.main {
padding: 40px 70px;
display: inline-block;
width: 100%;
color: #AFBEC6;
text-align: center;
border: 3px solid #E7ECEE;
background-color: #F7F8F9;
position: relative;
}
.icon {
background-image: url(https://mdn.mozillademos.org/files/7693/catfront.png);
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
left: 0;
top: 0;
}
.text {
font-size: 24px;
position: relative;
top: -18px;
}
<div class="main">
<div class="icon"></div>
<div class="text">No Data available</div>
</div>
The background image is not showing because the element doesn't have any height. You might think that using height: 100% to the element, would make it take up the same height of it's parent, but it doesn't work like that.
When a child element has height: 100%, it will only take up 100% of it's parent if the parent has an explicit height set, like with pixels, ems, vm, etc.
The text in this header centers just fine until you shrink the width of the page, then it just moves the text to the right.
You can test it here:
http://jsfiddle.net/ors2gqey/
.header {
background-color: #000;
width: 100%;
display: block;
overflow: hidden;
}
.headerImg {
padding: 200px;
background-image: url("header.jpg");
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.header h1 {
min-width: 140px;
text-align: center;
color: white;
font-size: 4.5em;
}
<header class="header">
<div class="headerImg">
<h1>TEST TEXT</h1>
</div>
</header>
#media (max-width: 600px) {
.headerImg {
padding: 0;
}
}
.header {
background-color: #000;
width: 100%;
display: block;
overflow: hidden;
}
.headerImg {
padding: 200px;
background-image: url("header.jpg");
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
#media (max-width: 600px) {
.headerImg {
padding: 0;
}
}
.header h1 {
min-width: 140px;
text-align: center;
color: white;
font-size: 4.5em;
}
<header class="header">
<div class="headerImg">
<h1>TEST TEXT</h1>
</div>
</header>
The problem was that I used padding on all sides.
Solved with just using padding on the top and bottom:
.headerImg {
padding-top: 200px;
padding-bottom: 200px;
background-image: url("header.jpg");
background-position: 50% 100%;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
I have a background image with a h1 and paragraph tag on top. I wish to create a border around the h1 tag without affecting the padding or margin of the header. When I create the border, it surrounds the text and the top padding. Is there a way to apply a border around the text only?
The complete code is on JSFiddle here.
The CSS code is here:
header {
background-image: url("https://images.pexels.com/photos/8263/pexels-
photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
h1 {
color: black;
text-align: center;
display: block;
font-size: 50px;
padding-top: 180px;
margin: 0;
}
Is this what you are after?
Below is the code that was used to get the effect. You can have a play with the padding and margins for the H1 to space it out if you want.
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
padding-top: 180px;
text-align:center;
}
h1{
color: white;
text-align: center;
font-size: 50px;
padding:0px;
border:1px solid #000000;
display:inline-block;
margin:0 auto;
line-height:40px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
<body>
<header>
<h1>Guitar Covers</h1>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
I went a different rout and created a wrapper around the H1 with the padding-top
https://jsfiddle.net/9ss2g8eL/1/
<body>
<header>
<div id="h1_surround">
<h1>Guitar Covers</h1>
</div>
<p>This is a new page for uploading my Guitar Covers to share with the world</p>
</header>
</body>
body{
background-color: #404040;
}
header{
background-image: url("https://images.pexels.com/photos/8263/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb");
height: 500px;
padding: 0;
margin: 0;
background-attachment: fixed;
background-size: cover;
text-transform: capitalize;
}
#h1_surround{
padding-top:180px;
}
h1{
color: white;
text-align: center;
display: block;
font-size: 50px;
margin: auto;
border:1px solid #FF0000;
width:350px;
}
p{
color: white;
text-align: center;
font-size: 30px;
}
the background of the "main" part of the homepage(marked in red), should be black but because of the image, it cannot be seen. This is my code:
body {
color: white;
font-family: futura;
background-color: black;
font-size: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
background: url(Website_Bilder/background.png)
no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
head {
font-size: 30px;
display: block;
position:relative;
background-position: center;
background-size: cover;
background-attachment: fixed;
text-align: center;
}
section {
font-size: 15px solid #a0a0a0;
border: 50px;
padding: 0%;
clear: ;
margin: 1em auto;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* link color */
li a:hover {
background-color: #111;
}
img {
width: 100%;
float: center;
height: auto;
max-width:100%;
display: block;
margin: 1em auto;
left:0px;
top:100px;
z-index:-1;
}
p {
padding 10px 20px 10px 20px;
margin 20px;
}
and this is what I get:
/I made better screenshot and added more code
In case that I understand you correctly: You want your red bordered area to have a black background instead of the image that is defined as background in your CSS body selector? Then you just have to define a new CSS class/id for the html tag that surrounds this area, like this:
html, body {
height: 100%;
width: 100%;
}
body {
color: white;
font-family: futura;
background-color: black;
font-size: 15px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
background: url(http://tub.tubgit.com/reimg/resize-img.php?src=http://photos.up-wallpaper.com/images251/jdicnfzws24.jpg&h=1080&w=1920)
no-repeat center center fixed;
-moz-background-size: cover;
background-size: cover;
}
div.redArea {
min-width: 70%;
height: 100%;
background-color: black;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="redArea">
<p>this is a test</p>
</div>
</body>
</html>
The width of the redArea class has to be defined as min-width because you have set the max-width of your body selector to 700px.
I need to add padding to a class with a background image. However, when I do so, the padding isn't added to the background image, just the anchor. What am I doing wrong? Here's my CSS:
.heart {
width:200px;
height:18px;
background:url(/images/content/digital-learning/course-library/sprite-favorites.png) 0px 18px repeat-y;
padding-left: 20px;
display:block;
}
Try using margin-left: 20px; instead.
Margin is outside the container and padding is inside the container, so padding won't move the background of the container.
Background can show based on background-origin: content-box;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background: url('https://via.placeholder.com/50x100') left center repeat-y;
padding-left: 20px;
display: block;
background-origin: content-box;
}
<div class="container">
<div class="heart">x</div>
</div>
or
Another solution is background-position-x: 20px;
.heart {
width: 200px;
height: 18px;
border: 1px solid tomato;
background-image: url('https://via.placeholder.com/50x100');
padding-left: 20px;
display: block;
background-position-x: 20px;
background-repeat: repeat-y
}
<div class="container">
<div class="heart">x</div>
</div>