Say I have an image that has a width of 2000px. The snazzy design part of my image starts at about 600px in and is 900px wide or so. What I want to do is to use this image as the background on a website and have the snazzy design centered and when you stretch the browser window, reveal the entire image still keeping the snazzy design centered. How can I do this? Also, putting the snazzy part in it's own layer above the background is not an option.
Thanks
You can center the background image using the CSS background-position attribute:
background-position: top center;
To add to Guffa's answer, you can also use percentage and pixel values to position your background image:
/* Centered vertically, 200px down from the top of the page */
background-position: 50% 200px;
/* 30px from the left edge, -10px from the top (shifted up beyond the top) */
background-position: 30px -10px;
Related
I have set up two background images on showcase side by side. It looks fine when I see it on a full screen but when I change the size of the screen by moving the web browser, the image on the left goes over on the image on the right... so I'd like to know how to set both images moving equally. (means change the size of images equally, not left one goes over on the right image) Thank you very much for your help.
#showcase{
min-height: 400px;
background: url("../IMGS/showcase.jpg") left no-repeat, url("../IMGS/showcase2.jpg") right no-repeat;
padding: 15px;
}
You should add / 50% exactly after the background-position property which in this case is left or right for either of the images.
you can see the css block as follows:
#showcase{
min-height: 400px;
background: url("../IMGS/showcase.jpg") left / 50% no-repeat, url("../IMGS/showcase2.jpg") right / 50% no-repeat;
padding: 15px;
}
You can read more and experiment with the property at the MDN Web Docs:
https://developer.mozilla.org/en-US/docs/Web/CSS/background
You may have to individually style each image to "width: 50vw;" that will set each of them to occupy 50% of the view-port no matter the size of the window. So they should each change dynamically and adjust by the same size when the window increases or decreases.
I want to place an image as a background, I've also apply the
background-size:cover
for no-scroll. The problem is when i view the page at different resolutions the whole picture (full width) showed up instead of the center portion (blue bordered area), is there any possible way that I can set the image as background with no scrolling and image will remain center aligned.
this image may describe more specifically what I'm trying to ask. I just want to fix this image at any resolution but the blue bordered area must be remain center aligned,
You can combine background-position: center center with background-size: cover.
use:
overflow: hidden;
max-width: 1200px; // change the width
and add to the background :
no-repeat 50% 0;
I want to have a background image at the center of a div (the width is fixed, but the height is content dependent, so I wouldn't know the height.)
The image is the logo of a university that logs into the system. So Its width and height are also different based on the university.
How can I place the logo at the center of the div as a watermark without having two divs? Is it possible?
Thanks
K
CSS
#test {
background-image: url(path/to/image.jpg);
background-size: 50% auto;
background-position: center center;
background-repeat: no-repeat;
}
This should put an image centered in it's parent element at a width that will be whatever percent you set. The image will be a background image. I believe IE8 and under will not display as you want. You will need to alter the image as I don't think you can adjust the opacity of a background image via CSS. So make the image semi-opaque.
Here is a fiddle: http://jsfiddle.net/MWvCA/
The other option is to add an absolute positioned img to the div, center it, and adjust the opacity via CSS, but if I were you I would just adjust the image.
I'm attempting to add a bookmarklet to my wop website. The issue is that I would like to have the bookmarklet (highlighted in red in the picture below) centered as if it did not have the arrow sticking out the side. If I change the width of the bgimage in the css, to be the same as the below indented box thingies, it centers how I would like it to. But, it cuts off a bit of the arrow. So, my question is, how can I center the bookmarklet as if it had the width of the other indented box thingies.
bookmarklet CSS:
#bookmarklet {
background-image:url('images/bookmarklet.png');
width:425px;
height:175px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
padding-bottom:8px;
}
I want the bookmarklet to be centered as if it were(without cutting out the side of the arrow):
#resultbg {
background-image:url('images/resultbg.png');
width:404px;
height:347px;
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
padding-top:8px;
}
Any help is greatly appreciated!
Thank you(:
measure the amount of pixels the arrow 'sticks out' from the box, divide it by two and make it your left margin
That's the first thing that came into my mind. However, you are using the left margin to center the image in the first place. Maybe have a container div, center this div with margin-left: auto and margin-right: auto, and then play with the margins of the image inside this div. That should work
Just add
background-position:center;
To the background which should be centered
A few options:
Reduce the width of the image and pad the side with some blank space that way it wont get cut off.
Wrap the image in a div and set the width so the backgroung image is positioned as needed using some padding or margins.
on my homepage I display images in a 100px tall DIV.
The images are all over 100px+ so I use a div with the CSS property of overflow:hidden
to easily trim off the extra pixels.
But the images don't look so good.
Is there a way for me the center them vertically?
This would make the "trim off" be the same for top and bottom.
http://billetagent.eweb703.discountasp.net/Arrangementer.aspx
thanks!
You could put the image as a background-image on the <a> element with background-position: 50% 50% (centered vertical and horizontal).
<a ... style="background: url() no-repeat 50% 50%;"></a>
(Provided that the images are at least 100px tall. Otherwise they will not align to top top.) (Oh, you've already stated this. Great.)
On the now empty <a> element you can furthermore add display: block; height: 100px to have a clickable area of the same size as the (visible) image.