Hoping someone can help me with a body tag overide I'm having trouble with. Here's the page I'm working on: http://www.designbyantony.com/JMP%20Bootstrap/index.html
I'm trying to set a responsive full screen background image to this (homepage only) by using the full.css file linked to the page. I've attached a screenshot of what I'm aiming for - the image is the jpg marked up in full.css. I was hoping this css file would override any other body declarations in the other css files but it's not working. I have tried assigning a body ID to this page ( etc) but this hasn't worked either - and I disgarded it. I know this is a specificity issue but I can't figure this out. Oddly the background image shows up in DW CS6 design preview (never to be relied on I guess) but not in the browser.
Thanks for taking the time to read this - hoping someone can at least steer me in the right direction.
Thanks, Antony
can you try to change you css for body tag in full.css file to
background-image: url('../images/john-landing.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
Related
In Spree 3.1 Standard Themes (out of the box)
I tried to change background image.But not work. Perhaps the path is wrong. Help need.
Here what I did.
Upload image to be /app/assets/images/NewBackGroundImage.png
Add css in vendors/assets/stylesheets/spree/frontend/custom.css
CSS:
.spree-header{
background-image: url("/assets/images/NewBackGroundImage.png");
background-size: cover;
margin-bottom: 10px;
}
Here my inspect of the current page
This part is my attached screen shots for my comment of the answer below.
At the inspect screen it clearly display error 404 (Not Found)
Tried change to use asset-url then
SCSS:
Then Change my custom.css to custom.scss
And this is the inspect shot NOW IT WORK
As I can see, your page doesn't use your styles at all. Are you sure the div tag has the class "spree-header". Because in your browser it only has id "spree-header" and nothing about the respective class. Try to replace it from .spree-header to #spree-header. If there might be confrontation between styles, then you can always try the usage of !important tag: url(...) !important;
If the folder "vendors" is in the "app" folder, then you can use the relative path url("../../../../../assets/images/NewBackGroundImage.png") as well
Hi I am building this site at http://amy-and-duncan-are-getting-married.co.uk/, using the Aggregate theme on WordPress.
The problem I am having is the background on certain pages does not fill the whole screen and I am left with a blank white area, when in Chrome if I go right click and inspect element I can get the CSS for the image and add the code I want,
'background-size : cover;'
I have tried researching this but I have read that WordPress automatically creates this CSS, surely there must be somewhere I can go and edit this code.
Can someone kindly give me a hint or clue cause I feel I am tearing my hair out.
Thanks
Craig
Log in to the back-end of your WP site
websiteurl/wp-admin
Then on the left side bar, go to:
> Appearance
> Editor
Then look for the stylesheets on the right, under:
> Styles
Then CTRL + F the code you need to change, for instance:
#content-area
then add to this selector:
background-size: cover;
Then click Update File.
Hope this helps.
Use inline style like
<div id="content-area" style="background-size: cover;">
Or add an external style sheet in your wordpress theme and define content-area id like
#content-area{
background-size:cover !important;
}
I think this will work for you
I am designing a website using the Flat UI Twitter Bootstrap mod. While trying to set a background texture, I have found that it is not visible. Here is my CSS:
body
{
background-color: transparent;
background-image: url(img/texture.png);
}
Can someone help me to get my background texture to work?
Without more details, the first thing I would check is the path to the texture.png image. Since its a background image, the url is relative to your stylesheet.
So say your your CSS is in the website/css folder and the texture is in the website/images folder, your CSS would be more like:
body
{
background-color: transparent;
background-image: url(../images/img/texture.png);
}
If you know how to use the web inspector or something similar on most browsers, it will help to pinpoint the source of the problem.
Good luck!
I have been trying to speed up my website, and in doing so I combined a number of my images into a sprite file. Everything works great now, however, when I run the site, either locally or on the test site it loads the sprite file twice, and I can't for the life of me figure out why. I am using masterpages with asp.net, and I only have one css file, not including the css files that some of my telerik controls use, and I have not tampered with any of the telerik css files or sprites. You can venture to our test site at: http://www.myheadpiece.com/test and take a look. The name of the sprite file is ms1.png. I can also provide other code/answers where necessary, I am just not sure what/where to look. If anyone has any ideas please let me know. Thanks.
Check the case of the paths to the sprite, you have
http://www.myheadpiece.com/test/Images/Structure/ms1.png
and
http://www.myheadpiece.com/test/images/Structure/ms1.png
One is with a capital "I" the other one with a small "i". So in you CSS you should refer to the sprite either with "Images" or with "images".
Your css should look like this:
.Sprite { background-image: url("../Images/Structure/ms1.png"); background-color: transparent; background-repeat: no-repeat; }
.HeaderLogo { background-position: 0 -768px; ... other styles ... }
.CartButton { background-position: -818px -754px; ... other styles ...}
And both HeaderLogo and CartButton should have second css class assigned ('Sprite') so you load an image only once for Sprite class and all the elements that are going to use it change it position only.
I have a background image set on a web page with the following CSS:
body, html
{
background-image: url(Content/Images/bg-lounge-2-l.jpg);
background-repeat: repeat;
background-attachment: fixed; /*background-position: 0 -390px;*/
}
This background was visible until late last night, in Firefox and IE, but at some point something changed and it no longer shows in the browsers. It does show in the VS 2008 designer, and the image is in the correct location. If I paste the image url into my address bar, I can view the image. What could be wrong?
Remember that the url to the image is relative to the path to the CSS file, and not the HTML file that loads the CSS file. Also check that you have the correct spelling and capitalization.