I have a WordPress site where the body of the page is a background image with smoke rising. the site is https://cocowildfire.org. The placement of the image and size is important and works fine until I add the dropdown widget for Google Translate. Then all of the formatting that I have applied to the background image seems to go away (how the site is currently).
Below is the code that I have added to place the background image in the correct location.
Any ideas how to fix this? Thanks for your help.
Heath
body {
background-image:url(https://cocowildfire.org/wp-content/uploads/2021/03/WildfireBackdrop-new-gradient2.jpg)
}
body {
background-position:bottom center
}
body {
background-repeat:no-repeat
}
body {
background-size:contain
}
I'm at a loss at what to try. I have tried moving the google translate drop down to other locations, but that doesn't seem to have an impact. I've googled the problem and it appears that it may be due to having the background in the body of the CSS, but moving it out of the body seems like it would cause more display issues.
Related
I'm trying to set up parallax using CSS perspective and translateZ, but getting some weird overflow errors in Firefox.
http://jsbin.com/fiviyefeme/1/edit?html,css,js,output
As you can see, when moving the mouse around, the background-image gets cropped. But I really can't see why they would do that. I've also tried using preserve-3d, but that only makes them dissapear.
Can only see a white background in the link that you provided. I have also checked the css and it doesn't have any background image on it:
body {
perspective: 800px;
}
Have you updated this?
I'm not very knowledgeable on the subject, so I beg your pardon if this is very basic.
I have a website at lolhehehe.com and whenever a user clicks on the Facebook like button at the bottom of every post the Facebook box won't show completely.
Is this an CSS issue? How can I solve it?
Thanks a lot guys
Add this to the end of your stylesheet:
body .fb_iframe_widget iframe {
max-width: none;
z-index: 2;
}
The button is an iframe and your theme was preventing the frame from growing. I added the z-index because other elements were overlapping without it.
Due to the positioning of your button, it may flow off the screen sometimes anyway. You may want to consider adjusting its position as well.
I am working on a hybrid HTML5, Jquery Mobile application using phonegap. I am currently having an issue with a background image I set using CSS. I have a CSS class (bPage) that sets the background image and color and all that and it seems to work right. The issue is when you navigate to a page that requires scrolling. Because the image is set to be in the center it moves to the center of the page, which is great. The problem is that the page loads with the image in the spot of the previous page and then it jumps to the middle. I want to make it move the image before the rest of the page loads so that it doens't look like the background jumps last in the page loading. Both pages have the class bPage on them and it is working correctly, except for the jumping. I assume that there is a way to force this to load earlier or something but have not been able to find a way.
Here is my bPage CSS code:
.bPage{
background-color: #6c6d6f;
background-image: url(../img/Backgrounds/Background.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
Thanks in advance!
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice
I've looked everywhere and can't find an answer for this, I think possibly because nobody has had the same problem, or possibly because it's a very specific problem.
The problem I'm having is, that linked images on the site I'm working on, have a small border underneath when hovered over, this is in all browsers (apart from IE 7, which the site was designed originally in). This is due to setting a:hover as having a background. Despite setting no borders, margins and padding to images, it's still not happy for some reason.
I only have 2 ways to solve it, set a class with no background on certain a tags, or display the linked image as a block. Unfortunately both these solutions aren't suitable, because the site has hundreds of pages, and possibly thousands of linked images, using a class means finding them all! Using display block will break some of the displays of images, such as the when they're centered nicely in a p tag.
If you want an example of it not working for me, the homepage of the site in question is http://www.tameside.gov.uk, look at the social media icons in the top right, they're all getting the background hover treatment.
If anyone could help I'd be really grateful.
Thanks,
The image icons are PNG and have a transparent background. That is why you can see the background.
You can change the icons to have white background (same them as JPEG) and you will no longer see the background.
A faster fix would be to add a new CSS rule that apply only to the a tags inside the social media div:
.banner_container .social a {
background: none !important;
}