i am working on a project in which I have a background image all over the page and over that on the left half of it I have a div in which there is lots of content along with a slider.
The image is of a girl.
background image is in body tag and we cannot move it to another tag.
now the problem is that the background image is cut in half from the left due to that slider content. now we cannot see the girl's face, only her body
I have to move that image towards right so that we could see her face also
i tried to crop the free space from image but that didn't help and we cannot move the slider content.
Image size: 5MB
Resolution: 2710*4072
tried to do margin-right
padding-right
background-position:right
but i can't move that image an inch to right
background-color: #ffffff;
background-image: url('/2014/12/Profile-Background-image.jpg');
background-repeat: no-repeat;
background-position: center right;
background-attachment: fixed;
line-height: 1;
Sample code: http://jsfiddle.net/gmunish/dby4e86j/
Image is not visible so you can add your own image and check
You can specify how far from the right you want the background to be if that is useful.
for example if you wanted the image to be 50px from the right you could use:
background-position: center right 50px;
you could also use a negative value to move it further to the right like so:
background-position: center right -50px;
Related
I have an image and am asked to copy the example given to me. currently, I am placing the background image and have noticed the example they have given me has given or taken, 100px from the top, and 300px from the bottom taken away (I could only guess the correct vocabulary to be cropped). I have attempted to use :
body {
background-image: url("stuffNthings.jpg");
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
but have found that using this block the image is centered as far to the top right corner as possible and missing more than 300px from the bottom. the right side appears correct.
It would be good to know what this example you're given is but background-position property might be good in this case.
It will align the image to the right horizontally (I assume that's what you want since you say the right side of the image looks correct) and push it vertically up 100px (and will hopefully leave 300px at the bottom, it depends on the size of an image, but unless the page will be seen on a single size screen and not be responsive, I wouldn't worry about that).
body {
background-position: right -100px;
}
Check out MDN Docs for more info
I'm Making a multiple background image, and I want an image(flower image) to be going vertically if the browser is been resize accordingly.
Below is a screenshot of the background image I want the flower hand to go up anytime I'm resizing the browser.
https://imgur.com/zntKZUy
Below is my code the second URL is the image I want to go up(vertical) whenever I'm resizing the browser.
.desktopbackground {
background: url("wp-content/uploads/2019/02/mobile-Girl-2.0.png") 50px bottom no-repeat,
url("/wp-content/uploads/2019/02/Flower-3.0.png") 100% -10% no-repeat,
url("/wp-content/uploads/2019/02/desktop-Background-1.0.jpg") center no-repeat;
background-attachment: fixed;
background-size:515px,555px,cover;
}
I've tried everything but it keeps going horizontal.
I have a lead background image which is positioned right. I want to achieve when resizing the browser window, that the bg image will be cropped from right side.
Now it is only moving along the browser window, but I need to crop the right size as I resize it.
My current code:
<div style="background: url(assets/img/leadspace.jpg) top right no-repeat #1d2f93;height: 360px;"></div>
use background-size: auto; background-repeat: no-repeat; remove the top and right align. if you want top right alignment for higher version(desktop view) use media query.
check the demo
I want to give a container a background image, which is basically a white image, with a fancy border on its left and right side. It is only a few pixels high so gets repeated on the y-axis.
However, the image is a set width, so cannot expand/contract on the x-axis. Is there a way of maybe giving the container 3 background images - 1 for the left border, 1 for the right and 1 for the centre?
That way I can repeat the centre background image and sandwich it between the side background images.
I had two images and did it with that you can add another one http://jsfiddle.net/xksr01v4/
#back{
width: 500px;
height: 250px;
background-image: url(http://placekitten.com/300/301),
url(http://static.comicvine.com/uploads/original/11112/111123678/3503035-3468468-2718720139- batma.jpg);
background-position: left, right;
background-repeat: no-repeat;
}
#container{
background-image: url(image1.png), url(image2.png), url(image3.png);
background-position: left top, right top, center top;
}
There are probably many ways to do this, but this link shows a very simple way of having an expanding background image:
background-size: 100% auto;
I have a fixed, full screen background. I have another image a few hundred pixels from the top that I want the background to appear to emanate from. Looks good here: http://imgur.com/Rlki1Bk.jpg but when the browser is resized the centre of the background image moves vertically but the foreground image remains fixed so they are no longer aligned. Any help would be greatly appreciated.
EDIT: Some more info. The foreground image is position:relative, and here is the CSS for the background image:
.background {
background-attachment: fixed;
background-image: url('/background.jpg');
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
Hard to tell what's going on without some code, but...
background{
background-image: url("my-image.jpg");
background-position: center top;
background-size: 100% auto;
}
This will ensure that the distance from the top of the window to the other image never changes because the height of the image remains the same, and the position of the image is always flushed to the top. The problem that you'll encounter is that depending on the width of the device your background may stretch.