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.
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.
I have an image here that I only want a specific position what to display. But mine is not working. I only want the hands to view without cropping the original image. Thanks in advance
Expected result
HTML
<div class="banner">
<h1>できる限り<br>
自然な形で育てた<br>
こだわりの野菜です。</h1>
<h4>生産者／川口太郎・川口久美子さん（安芸市）</h4>
</div>
CSS
.banner{
background: url(../img/img1.png);
background-size: 100%;
padding: 32% 0 5% 6%;
color: white;
letter-spacing: 0.1em;
border-radius: 1%;
}
Combination of background-size and background-position CSS attributes. Dont forget you can make the background-size value greater than 100%. I would throw this at it and fine tune from there:
.banner{
background: url(../img/img1.png);
// background-size takes height and width but shorthand is one value used for both
background-size: 200%;
// background-position options include center, cover, and more: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
background-position: center center;
}
Use CSS Clip. You can crop your image on the page without having to edit the original image source file.
https://www.w3schools.com/cssref/pr_pos_clip.asp
Looking your expected image, I thing you can try this:
background-repeat: no-repeat;
background-size: cover;
background-position: top;
I'm wondering if the following is possible with CSS.
I'd like there to be 3 horizontal bars running across the entire width of a background. Here's a rough mockup of what I would like the background to be
I've been toying with the following but I can't seem to be able to position any of the backgrounds.
#blog {
width: 1200px;
height: 100%;
background-image: url("bg1.png"),
url("bg2.png"),
url("bg3.png");
background-position: 10px 10px,
170px 10px,
750px 10px;
background-repeat:repeat-x;
}
Here's a fiddle: http://jsfiddle.net/5fo054L2/1/
Any idea what I'm doing wrong?
You almost have it. The issue is that you have the x and y position confused. Also, x position doesn't have any meaning if it repeats.
.blog {
width: 100%;
height: 100%;
background-image: url("http://i.imgur.com/L3F9slr.png"), url("http://i.imgur.com/rmPDxMq.png"), url("http://i.imgur.com/9MMzDMs.png");
background-position: 0px 170px, 0px 100px, 0px 10px;
background-repeat: repeat-x;
}
Here is an updated jsfiddle: http://jsfiddle.net/5fo054L2/3/
Note that the vertical height (of text in your example) will limit the amount of the background images you see.
You can also make three image files, place them below everything else, and set them using absolute positioning.
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%
I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
Any idea how to do that? So far I have this css for the overall banner div:
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
Thanks!
You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
background-size: <width> <height>;
More usage:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
Use background-position: right; and background-size: [width] [height] (replace values where needed).