The issue is a bit problematic to create a fiddle but I found a template that has a similar problem: http://www.elegantthemes.com/demo/?theme=StudioBlue
The issue is the following: there's a wrapper that has all the content inside of it and a background image positioned at the top center with no-repeat. Everything looks fine, until you resize the window until the window size is smaller than the content/wrapper size.
At this point everything still looks fine as the left edge of the content is aligned with the left side of the browser and you get a scroll bar at the bottom. However, if you scroll to the right you'll see that the background image (since it's centered), actually moved to the left and is now partially of the screen, leaving some blank space to the right. Any idea how I can trick the background image to stay on the screen instead of going off the left side when the window size becomes too small?
you could probably either set the center value to 50% and see what that does (probably nothing different) or you could use media queries for smaller screen sizes. The example you've shown does not have a center position, just a top. Let me know if I understood correctly or what occours! :)
background: gray url(img.jpg) 50% top;
or
#media screen and (max-width:480px) {
body {
background: gray url(img.jpg) left top;
}
}
The issue is that the image is being centered relative to the width of the window when it needs to be centered relative to the scroll width. To fix that, you can create another div at the top of your html to have the background image:
#image-div {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') no-repeat center top;
}
Related: https://stackoverflow.com/a/15792723/1721527
Related
i want to put full screen background into my personal Wordpress site, and having some issue with it. I tryed to insert fullscreen background in this way:
body {
background-image: url(https://testsite.com/wp-content/uploads/2018/04/Backround5.jpg) !important;
background-size: cover !important;
}
but when load the site, it shown background in full size for second and after that back , again to corners background.. How to set background image to show in full size, including page content? Affected URL. Thanks in advance.
As previously mentioned, the reason why this is happening is because you have other elements that have backgrounds which are being rendered over-top of your body.
There's a background:black being assigned to a number of your elements. I've done a live inspection and edited a number of them to have background:transparent !important, to override the setting in order to display the background from the body.
You will need to go through your site, much like I did in screenshot provided below, and you'll have to find out which elements have a background, and set their background to transparent.
What I've done to remove the backgrounds from those two elements on your homepage is:
A)
#media_image-2 {
background: transparent !important;
}
.widget-odd .widget-last .widget-first .widget-1 .def-block .widget .clr .widget_media_image {
background: transparent !important;
}
B)
.ult_tabs .ult_tab_min_contain.tabanimate {
background: transparent !important;
}
Once you've eliminated all of the backgrounds on the elements in front of your body, you will be able to see your main background just like in the screenshot provided.
EDIT (In addition to previous solution):
If the intention is to create a full-parallax style background where the background is more or less fixed in a position regardless of where you're scrolling... add this to the CSS of your body:
background: url(yourbackground.jpg) no-repeat center center fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
try this on body for background
background-attachment: fixed;
and for others elements
.ult_tabs .ult_tab_min_contain.tabanimate{
background-color: transparent !important;
}
I'm working on a site here:
http://www.jasnasyogaonline.com/membership-test.php
And if you hover over the right nav, you'll see a fade in effect that happens where the background animates to the top and bottom from the middle of the link. In between the three colored lines (the border of the right nav) you'll see that there is white color. This is because on the other pages of the site, the background is white and the original programmer just used a background image to create the 'diagonal' edge of the nav item. Now that there is a full page video/image, this doesn't work because the background isn't white and the effect is lost.
My client is now looking to just have it be transparent between the razor lines but keep the nav items with the diagonal edges. If I removed the images on the end of the nav item, they just become straight rectangles. I've tried some CSS with borders/border-widths, etc. but it's a little tricky because if you look at the source code, the background is being generated by a PHP file that's using imagecreatetruecolor to create the hover effect.
Any ideas on how to cut the corner off of the right nav while keep the area between the razor lines transparent? I'm beginning to run out of ideas. Thanks for your help!
My suggestion would be to drop the hover edge div all together
.nav ul li div {
The recode the animation using a background sprite / animation. In reality I don't really like the mouse over effect at all. Maybe you could sell the customer on something that is easier to do like a text outer glow or an underlining effect.
Also: this post doesn't have anything to do with PHP
EDIT I can't think of another way this can be achieved but you can try if you want this design.
.nav ul li a:hover {
color: #FFFFFF;
text-decoration: none;
-moz-border-radius: 10em 0em 10em 0em;
border-radius: 10em 0em 10em 0em;
text-align: center;
}
On the World of Warcraft forums they have a neat style set up that I'd like to emulate. I didn't know how to do it, so I decided to dig through their stylesheets and grab the pieces of it and put them together to learn how to make a style similar.
When digging through the stylesheets, I found this image. As you can see, it's the background for their forum posts, but it's a fixed size. Here's my question - how are they dynamically creating more length if a user's post is much longer than the picture is?
On a test website I grabbed the same CSS they used for that section. They have it set on overflow:hidden; so that it doesn't keep multiplying the image. Naturally, copying parts of their code gets me this mess on the test website.
It works correctly for smaller posts, since they just have to cut it off, but I'm assuming they have maybe a very thin (set width, perhaps 1 pixel in height) .jpg image that they are multiplying depending on the size of the forum post.
Does anybody know how I might go about doing this?
P.S. Naturally I'm not going to be using their images and such - I'm only copying it for now just to understand how to make my own.
Something like:
CSS:
.post
{
background:#1A0F08 url(http://us.battle.net/wow/static/images/layout/cms/post_bg.jpg) top no-repeat;
}
(the image and the color are those really used, hope they don't sue me for that :) )
is what you're looking for. The background image is positioned on top and stays there, while the rest of the container's height has the same background color that the image fades to (using a gradient). So it's just an illusion of a stretched image, but effectively is just that you don't see the interruption where the image ends
It looks like their background color for the post is the same as the color at the very bottom of that image. That way it just "fades" in - the image does not actually change size.
Example CSS would be:
#yourPostSelector {
background-image: url('path/to/image.jpg');
background-position: top left; /* or 'top center' - whatever works for you */
background-attachment: scroll;
background-color: #000000; /* pick the bottom color of your background image */
}
Just change you background color which you have used is #00000*
It should be changed to the color of the background image which you use, basically the bottom part so that it blends perfectly. Presently as per your present image the code would be like this :-
.body {
background: url("../images/post_bg.jpg") no-repeat scroll 50% 0 #1A0F09;
clear: both;
height: 100%;
margin: 0 auto;
overflow: hidden;
width: 990px;
}
Update this class and check the result, if you don't understand comment here would make you understand.
My goal is to take an image (size varies) and have it fit within a set container (330x330 pixels). I do not want to resize the image. I want to simply have the css have it automatically move itself to cetner the picture as if it were cropped with 330x330.
If I put in a picture that is smaller than 330x330 though then i supposed it would have to scale it up. For instance if it were 200x800 then it would stretch it out and then shift the image vertically to show the center?
Is this possible or is what I am trying to do impossible without a lot of annoying PHP? Thanks
You can use:
div {
width: 330px;
height: 330px;
background: url("http://placekitten.com/800/200") 50% 50% no-repeat;
background-size: cover;
}
It should works on: IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
I tried to make a sprite by copy-pasting the code you gave to the userbar.php file. I kept the CSS the same as above. I saved the file with photoshop "save for web -> gif 64 no dither" and kept a small space between the two images in the file. I then uploaded it and referred to the file. But for some reason it only shows the normal image without the hover. Any ideas what I did wrong there? The code for php:
.myButton {
background-image: url(/wp-content/themes/cosmicbuddy/_inc/images/see.gif);
display: block;
height: 22px;
width: 22px;
}
.myButton:hover {
background-position: x y;
}
The original thread: How can I make this hover code shorter? And how can I create a css file that implements settings to more than one button?
Try
.myButton:hover {
background-position-x: -22px;
}
if the sprite is horizontal, else background-position-y.
For better understanding of sprites, watch this article about spites on nettuts+.
.myButton:hover {
background-position: 5px 5px;
}
One solution might be to specify the actual positional values for the sprites located in see.gif, as it's not clear if you're using x y as values or just as a placeholder for the snippet above.
If it's not a placeholder, well yeah - there's your problem. Just change x into the actual x-position and y into the y-position and you'll be fine.