This is a little tricky to explain what is happening.
http://easyuniv.com/staging/gonzaga/
If you go to my site above, you can see how the background image moves around when the window is shrunk and expanded horizontally. I am hoping to make it so that the bottom left corner of the image is fixed in the bottom left corner of the window regardless of the window size, and then if it is wider, it will show more of the image. How can i accomplish this? I have tried a lot of different variations of settings
Set your background position to left bottom:
html {
background-position: left bottom;
}
Alternatively, just use the shorthand property to combine it with your background-image statement:
html {
background: url("img/background_image.png") no-repeat left bottom;
}
Related
I'm currently having difficulties in the header to resize/position a div with a background image.I did some google searches, but nothing really helped me..
The header has a logo, which is in a div called "header-left-section". On the top right of the logo, there is a navigation menu aligned within a div called "header-right-section". Those divs were already present in the theme.
We now wanted an image below the navigation menu and also on the right side of the logo. For that, I created a div tag "bottom-header-section" and set the image as the background image. Now I read several topics, that the background image doesnt show if there isnt a height and width set to it because therefor the div wouldnt have a size.
Now my problem is, that as soon as I make my browser window smaller, the div with the background image is set bellow the logo and menu, which I dont want at all.
This is my divs css code:
#bottom-header-section {
background-image: url('website/wertesystem/wp-content/uploads/2018/10/title-new.png');
float:left;
height: 120px;
width: 800px;
margin: inherit;
background-position: right bottom;
background-repeat: no-repeat;
}
With my understanding, now that I set the height to 120px and the width to 800px, this I set a fixed size to the div and as soon as I make the window smaller, the div keeps the same size but changes position because there isn't any more space on the same line as before right?
So what's the best way to align this div, on the right side of the logo and keep it responsive?
If you need a link to the website, please just tell me.
You can try to add something like this for the smaller breakpoint.
#bottom-header-section {
height: 65px;
width: 65%;
background-size: contain;
}
You might have to play with the height and width as it gets smaller.
I'm creating a one page website with an image that covers the entire background (and stretches proportionally with the window). For this I'm using a "background-size: cover;"
Now, when I'm resizing the window to the smallest size it let's me, the background image seems to anchor to the default top left corner.
Is there any way for me to change the anchoring location to top right?
try change your css code to be like this:
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
Here the demo: http://www.w3schools.com/css/tryit.asp?filename=trycss_background_shorthand
I am having difficulty tuning the placement of text on my web page. Items on the page seem to float about and not lock down. I need them to stay static with respect to the background image.
For example, I have a div Item called "leftMenu" I want the left menu to stay approximately 20 pixels to the left of the background image. Things seemed to work until I had to center the background image. Now that the background image is centered, I seem to have lost the ability to lock down div positions with respect to the background.
When the screen is full size things look good, but when the page size is altered the leftMenu drifts all over the place. I'm currently going through a lot of trial and error using absolute and relative positioning, but I can't seem to get the right combination of settings to make the item stay put irrespective of the page size.
Page: http://107.22.173.10/
user: test2
pass: abc111
Any advice would be greatly appreciated.
Instead of using a big background taking a div of text and position it absolutely to the center, why not get a div that's exactly the size of the background image and center it using:
CSS:
html, body{
height:100%;
position:relative;
}
div.siteWrapper{
background: !VALUE;/* your background*/
padding: 0 0 0 0; /* the space top, right, bottom, left from the edge of the bg image to the content box of the image*/
width: !VALUE; /* width of your background - (left + right padding)*/
margin:100px auto; /* this will center your site horizontally and move it away from the top*/
}
HTML:
<body>
<div class="siteWrapper">
//everything in here
</div>
</body>
As per your requirement acc to me you have to create a wrapper div in which your whole stuff should be present and you need to use jquery/javascript to calculate the position from top, right, left, bottom of the wrapper to make it in center of the screen. For example lightbox of jquery. because when monitor size varies then resolution changes and the position of background image change according to that but content is set according to css set on the id/class on the elements.
I have a a div#main that has a background image with a vignetting effect.
I want to keep this full image in the center of the page but I would like for a graphic to tile from the far left of the screen to this image, and another graphic to tile from the right side of the image to the far right side of the screen. I'm not concerned with tiling veI realize I could probably ask the designer to have the left and right edges of the image be the same color and texture so I could put the same textured color in the background, but I was trying to see if I can solve it as is.
So I assume I would need for the designer to create two separate graphics. One that tiles and blends in nicely with the left edge of the image, and another graphic that tiles and blends in nicely with the right edge of the image.
How would I set up my div's and css so that the left tile area knows to start at the far left side of the screen and to stop at the left side of the image and also so the right tile area knows to start at the right edge of the image and continue to the far right side of the screen?
Something like this would work, where bg_tile.jpg is the tile-able background without vignetting, and bg.jpg is the image as posted in your description:
#main_wrapper {
background: url(/images/bg_tile.jpg) repeat 50% 0;
}
#main {
width: 960px;
height: 300px;
margin: 0 auto;
background: url(/images/bg.jpg) no-repeat 50% 0 transparent;
}
There is a similar effect on Cultureamp (behind the iPad). Check the css to see it in action.
I use a table to show several images. I need to show the left half an image in the first td-element and the right half of it in the second td-element. This is because some of the images have double width as others. I thought i use a div and set this image as background image for the first two td-elements using a child-div. Now i am fiddling around to make it work using css.
Any suggestions?
Update: Working example: http://jsfiddle.net/BkAcu/2/
Use background-position: <horizontal> <vertical> where <horizontal> and <vertical> are background offsets, in conjunction with background-repeat: no-repeat.
Set the background-position to a negative value, to move the bg to the left.
See also: https://developer.mozilla.org/en/CSS/background-position
Example (assume your TDs to have a width of 100px, and the image to be 200px);
#td1, #td2 {
background: url("200.png") no-repeat;
}
#td2 {
background-position: -100px;
}