I can't seem to get the background-image property to work. I am trying to add images to the borders of my button, but it is not working. Here is the http://jsfiddle.net/Bchga/.
HTML
Image Borders
CSS
a {
text-decoration: none;
color: #fff;
}
.btn {
float: left;
display: block;
padding: 10px 30px;
background-color: #67b8de;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") no-repeat right bottom;
}
Your background-image rule also contains values for background-repeat and background-position. Separate them (or you can put the colour in too and use the background shorthand):
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png");
background-repeat: no-repeat;
background-position: right bottom;
Okay I went over the documentation on https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds
The new CSS
.btn {
float: left;
display: block;
padding: 10px 30px;
/* Notice that I list all the images */
background: url("../img/border-top-left.png"), url("../img/border-top-right.png"),
url("../img/border-bottom-left.png"), url("../img/border-bottom-right.png");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom left, bottom right;
background-color: #67b8de;
}
You will notice that I use the background: property, you can also use the background-image property, thanks for the tip minitech. You also should notice that you can't just specify individual image is you want to target all the corners of the button. Example:
background-image: url("../img/border-blah-blah.png");
background-repeat: no-repeat;
background-position: top right;
This will not target all of your corners, but only one corner will be targeted this is because of the cascade it will overwrite the previous rule, that's why you have to input the sources for all your images at once and then target them. Also you should put the background-color property last, because the color won't be applied if it is the first rule. I don't know why that happens.
You background image is too large:
it's working with a background image at 10%..: Link JSFiddle
background: #ff8844 url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png") 10%
Related
I would like to create a div with a partial background, example:
I tried applying margin in white, but I'm a bit lost.
You didn't write any code in question. So i writing example Html and CSS code now. I hope this code will has solve your problem.
body{
background-color: #e3e3e3;
}
.bg-container{
background-image: url("https://i.stack.imgur.com/Q9aDy.jpg");
width:250px;
height: 250px;
background-color: #fff;
background-repeat: no-repeat;
background-size: 200px;
background-position: center center;
}
<div class="bg-container">
</div>
You can use background-size: width height; and background-position: x y; to specify the space the background occupies within the div.
A gradient is an image, so you can add one and manipulate it as a color. Use background-color to specify the background you want to use behind it. background-repeat: no-repeat ensures that it is used only once.
background-repeat: no-repeat;
background-size: 80% 80%;
background-position: 50% 50%;
background-image: linear-gradient(white, white);
background-color: black;
The background-position values specify the horizontal and vertical positions, respectively. Use 50% 50% to center it.
Header screen:
I'd like to move it higher and to the left a little bit, but transform option moves a whole block. How can I deal with it?
CSS
.header {
height: 100vh;
width: 96%;
background-size: cover;
background-position: top;
position: relative;
display: inline-block;
text-align: center;
margin-top: 2rem;
margin-left: 2rem;
&__background {
background-image: linear-gradient(
to right bottom,
rgba($color-main-green, 0.3),
rgba($color-main-purple, 0.5)),
url(../resources/img-cropped/header.jpg);
}
}
Use the background-position property to move the background image. maybe use background-position: top left and if this does not suit the desired results you can also add px values instead of top, left, right and bottom.
Try to experiment until you achieve the desired result.
For example: This piece of code would make the image positioned 30px from the left:
background-position: left 30px center;
The center is for the y value of the image. You could also add px values to this one.
Use background-position, background-size and background-repeat CSS property to adjust the image.
I have this image name plate (PAST CHAMPIONS) for the plague and it looks decent on all screens except for iPhone portrait, it seems to get cut off.
Anyway to make this scale without media css?
Here is home page.
http://www51.myfantasyleague.com/2017/home/61106#0
Original code still in css
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
border: 0 none;
margin-left: 25px;
text-indent: -9999px;
}
Tried this code to no luck
#championship_plaque h2 {
background:
rgba(0, 0, 0, 0)
url( "http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png" )
no-repeat
scroll
center center
!important;
background-position: 70% 0;
background-repeat: no-repeat;
background-size: cover;
padding-bottom: 20px;
padding-top: 20px;
}
Desktop:
Mobile:
I guess I can use media call to switch to a new image for this size screen if all else fails, just want to see if it can be done this way first.
thx
In your second example you're duplicating property values by using the shorthand background property with !important but then overriding them immediately afterwards. I recommend using the longhand properties when you want to be very clear about what's going on.
What you want is background-size: contain - which automatically downscales the image so it's 100% visible in the parent container. You also want to remove the background-color: black:
This is the rule I've got that works for me:
#championship_plaque h2 {
background-image: url("http://dagrafixdesigns.com/Images/2008/DA_2017/DA_Pro16/plaquetitle_glass.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
Note that if you want to hide text there's a better approach than text-indent: -9999px, instead consider using this combination:
user-select: none;
color: #00000000; /* hex RRGGBBAA, AA=00 means 0% opacity, so the text is invisible */
I currently have an image that is a specific height and width, how would I set a specific color to run endlessly under the image.
body {
background-image: location;
background-color: #fff;
}
I'd like to background-color to be below the background-image and not all over the page but just under it.
update
html has background-color: #red
body background-image: .png image & background-color: #fff;
I'd like the background-color to not overflow the html color which is the top and just overflow under the background-image from the body.
Use below code:
background:#ffffff url(ImageUrl) no-repeat;
Use this one line code
body{
background:#ffffff url('img_tree.png') no-repeat right top;
}
DEMO
Try this
background:red url(../img/s.jpg) no-repeat center top;
FIDDLE DEMO
or
background-color: red;/*...background colour..*/
background-image: url(../img/s.jpg);/*...image source...*/
background-position: center top;/*...position of background image...*/
background-repeat: no-repeat;/*...it will avoid repetition of image..*/
FIDDLE DEMO
I am using this CSS to put an image into the <body>:
body {
background: url('picture.png') no-repeat;
background-size: contain;
}
The image is displayed at the top of the browser window, but I need to place this image a few pixels from the top.
I've tried using padding/margin-top: 20px;, but it didn't help me, the image is still at the top of the browser window.
How can I move this background image for the body tag a few pixels down from the top?
Note: I need to have the picture in the body tag.
You need to use background-position instead.
body {
background: url('picture.png') no-repeat;
background-position: 0 20px;
background-size: contain;
}
You can use css background-position property,
example
body {
background: url('picture.png') no-repeat;
background-position: 0px 50px; /* This makes the image appear 50px from top */
background-size: contain;
}