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.
Related
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 need help and I did not found any proper answer so far. I want to make background image on my website that is full width and height and responsive to any resolution and it is ok but problem is when I put other images ( I have 7 images over background img ). I place them and set with media query for every resolution and it is ok only when is fullscreen but when I watch regularly with address bar and bookmark bar in my browser it all messes around and even my background picture is not full width and height anymore. Sorry for bad English.
CSS for body:
body {
background-image: url('images/background1.jpg');
background-repeat: no-repeat;
background-position: top center;
background-attachment: scroll;
background-size: 100% 100%;
height: 100vh;
margin: 0px;
}
Then I put my images and with margin - left, right, bottom, top place them for different screen resolution in media query.
Do I need to set proper position to images or something else? Please give me a hint.
Edit:
This is what I get in fullscreen and it is ok
But this is when is not fullscreen
All are images except strips, those are part of background image.
Images have only margin style, nothing else. They are in divs with float style.
The easiest way to make background images responsive is this:
img{
background-image: url('.../your-image.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I have an image as background with the following CSS setup
#background {
background-image: url('../img/bgimage.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
opacity: 0.8;
filter:alpha(opacity=80);
top:0;
}
My aim was to center the background ( add a little opacity ), but still have its beginning at the top of the page. Now when the monitor of the user is too large it looks like this
One can see that the image doesn't begin at the top. ( the grey colour is supposed to be a navbar later on but isn't interesting in this question ). The blue colour is part of the background and the white colour is obviously just a wildcard till the background begins to keep the center available. How is it possible to horizontally center the image so it still starts at the top of the page or how is it possible to resize image, so it fits to the users monitor size?
You can use background-size: cover; like explained here.
Simple one, add these:
background-position: center center;
background-size: cover;
More info at Perfect Full Page Background Image.
To have a background always cover the surface of its container, use
background-size: cover;
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.
I have two html pages (index.html and about.html) with the same background in the body tag. I am using the following CSS to create the background:
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
However, the browsers (Firefox and Chrome) are not positioning the image correctly. Since the background color is white, index.html has a white line under the background image. I am assuming that the image height is too short.
Yet, there is a block of white space under the background image of about.html, bleaching over a quarter of the page.
How does this happen when I'm using the same CSS.
While on this topic, what is the best way to manage a background image for different screen resolutions?
Try:
background-size:contain;
contain property scales the image to the largest size such that both its width and its height can fit inside the content area.
The best solution that I can come up with was to use background-attachment: fixed;. This filled the entire background with my image.
I have not figured out as to why my CSS was displaying my background in different ways. This is something to look at.
body {
background: url("http://www.skrenta.com/images/stackoverflow.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I prefer you first take a small slice of image by photoshop and save it for web and devices or take a small size by snipping tool.Than you will get a small image with small size.
than type bellow code
body {
background-image: url('http://www.skrenta.com/images/stackoverflow.jpg');
background-repeat: repeat;
}