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.
Related
Well I am new with this, so I have this url https://bestfamily.gr and I tried to create a responsive header with image. I did the following with css
background: #000000 url(my_image_url) 100% 25% no-repeat;
background-position: center;
background-attachment: scroll;
background-size: cover;
The image displays a family, so when I zoom in or zoom out the image performs responsively.
But while I zoom out the image shrinks towards top and the faces in the image are not visible
Can I make the image to be shown normal and not actually hidden
Add background-size:cover and then remove the padding:153px on div id="page". It will resize responsively.
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'm building a website with a fixed background with scrolling content here: www.grandcollapse.com
The image is perfectly fixed and you can scroll down fine, however at mobile level the image seems to only take the upper portion of the viewport. The code I am using for the background I'm using is here (css):
body {
background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.6) 100%), url(img/background.png) fixed;
background-repeat: no-repeat;
background-position: center fixed;
}
Any suggestions?
Your div container blocks the background, adding a margin to it fixes it, you will need to use a media query to apply in mobile size
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;
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.