Site Wide Background image

I am trying to create a no-repeat background image for my website but after following the steps below I still can't see an image in the background. Here's what I did.
1. First I created a new plain text file named "background.css". In this file I placed the following code.
body {
background: url("http://www.mywebsite/harper pools/images/backgrounds/blue_sky.jpg") 50% 50% no-repeat;
2. I then Added the following code between the <head></head> tags in the index.html page.
<link rel=StyleSheet href="http://www.mywebsite/harper pools/css/background.css" type="text/css">
3. Then I placed the background image in (harper pools/images/backgrounds/blue-sky.jpg)
4. Finally I uploaded everything, but I can't see any background image.
If someone has any idea what is wrong I would appreciate it. Thanks.

1. Hi, on the homepage the orange button on the first slider that says "Learn More" is scaling (enlarged) and I don't know why. If you select the button and go "open image up in new window" you will see the correct size of the button. Does anyone know why it is being scaled up and therefore pixellated?
http://www3.telus.net/~jessum/holiday%20pools/index.html
2. Also, on the "About us" page the white footer bar is floating up. How do I force it to stay at the bottom, even if the page is shorter?
http://www3.telus.net/~jessum/holiday%20pools/about.html
<li>
<img src="images/slider-flex/01.jpg" alt="01" title="01" />
<div class="slider-caption caption-right">
<h2>BEAUTIFUL POOLS</h2>
<h4></h4>
<p>At Holiday Pools we design, build and install beautiful pools suited to your specific needs and requirements.</p>
<p> </p>
<a href="url/services.html" target="_blank">
<img src="url/holiday pools/images/buttons/learn_more.jpg" border="0" style="border:none;" alt="learn more" /></a>
</div>
</li>

Similar Messages

FF36: Sites with background image flickers/flashes when going back to tab after 2 minutes.

Figure I'll mention this here as well.
When viewing websites with background images, such as twitter.com or my own website at www.markheadrick.com and I change to another tab for 2 minutes (this amount of time is repeatable anyway) I get a flicker of a black background before the page is fully drawn. If I have multiple tabs with the same background image, only the first tab will show the flicker. It's like it's loosing the image in memory or something. It has done this with Firefox in Safe Mode and with a new, clean profile. It has also done this with Hardware Acceleration off.
Windows 7 Pro 64bit w/ NVidia 550ti and 314.22 drivers. Newer drivers are more problematic which is why I have stayed with these.
Again, only pages with background images seem to show this flicker. Did not happen with Firefox 35 on my system.
I created a bug for it here: https://bugzilla.mozilla.org/show_bug.cgi?id=1137082
Thanks,
Mark H

I tried, but could not see and problem.
Hello,
In order to better assist you with your issue please provide us with a screenshot. If you need help to create a screenshot, please see [[How do I create a screenshot of my problem?]]
Once you've done this, attach the saved screenshot file to your forum post by clicking the '''Browse...''' button below the ''Post your reply'' box. This will help us to visualize the problem.
Thank you!

Blend Overlay is not working in Safari over site's background image

My message is concerning the website (below) called
suspendedinsound.com.
The blend mode, Overlay, is not working on several of my
movie clips in the Safari browser.
The Flash swf and html is published with a transparent
background. I put a bg image (via CSS) in the html code. The
objects with overlay (the large animating gold rings and
play/stop/mute buttons), are not "overlaying" over the html's
background image. They look yellow or cream instead of being very
subtle (dark reddish brown). This is only a problem in the Safari
browser. Looks great in Firefox and IE.
Anybody have a solution?
Thanks
-loren
http://www.suspendedinsound.com

Transparent background is a less than robust publishing
option for Flash. As you've seen, it can produce some unreliable
results.

I have a 4:3 project, but wish to add a wide background image to convert the program to 16:9 - is this possible?

I have been asked to edit a 30min US TV program and prepare it for use on Australian TV.
The program is supplied as a downloaded .mov file in 640 X 480 (3:4). I have created a FCP-X project and done the required edits. The project is in NTSC 1080p 640 x 480, 29.97p format, but I'd like to convert it to a 16:9 format for Aussie TV. I think this could be achieved by adding a wide (16:9) background layer to fill up the black sides when it goes to air, but I am not sure of the best procedure to achieve this, or if it is possible at all.
Will I need to create a new FCP-X project first and then copy/paste the current edit? What is the appropriate format of the new project, given the above specs of the current 4:3 project?
Any tips helpful, as I am fairly new to this.
thanks,
Geoff

The project is in NTSC 1080p 640 x 480, 29.97p format,
That doesn't make sense. Is it HD 1080, which it absolutely shouldn't be, or is it SD 4:3?
Edit your 640x480 programme. When you're done, select the whole thing and make it a compound clip. Copy the compound clip and make a new project. Make it standard definition widescreen 16:9. Paste the compound clip into it. You should get pillarboxing on either side of the video. If not, adjust the spatial conform setting in the inspector for the compound clip.

Page background images show in preview but not after uploading

Hi -
I've built a page with a flash animation, and some other
minimal information below the movie. I have a page background image
that should be repeating horizontally behind everything. When I
preview it, all looks great! After I upload it to the actual site
the background images disappear. The code is all within the page.
Any ideas?

never mind... problem resolved.
my error in not checking my files over. oops.

Inserting 2 background images in to you site

I've seen many sites with more than 1 background images. How
can I do that with Dreamweaver CS3?
I am very curious and I need to know how to do that. I am a
newbie. Please don't give me horrible instructions. If you could
please just give me a link to a tutorial or if it is very simple
just tell me how to do it =]

Ok, try this, it will give you something to play with. Copy
all of the code
below between the *** and *** and paste it into a new html
page.
I did not make the top div 1000px wide, that would cause
quite a few people
to scroll left to right, but change it if you prefer. Your
bottom div will
grow in size depending on content.
Now someone else may have a better suggestion for you, but
this is one way
you can do what you seem to want to do.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#topdiv {
width:90%;
margin:auto;
min-height:800px;
background-image:(right click your mouse, go to Code Hints |
URL Browser,
and find your bakcground image file);
background-position:center;
background-repeat:no-repeat;
border:#000066 thin groove;
background-color:#FFFFCC;
#bottomdiv {
width:90%;
margin:auto;
border:#3333FF thin groove;
background-color:#33FF99;
background-image:(right click your mouse, go to Code Hints |
URL Browser,
and find your background image file);
</style>
</head>
<body>
<div id="topdiv">put 1000 x 800 in the #topdiv css rule
above in the head
tag. You will need to put all of your content containers
inside this div to
keep bg image inplace.</div>
<div id="bottomdiv">Put repeating image in #bottomdiv
in the CSS rule in
your head tag.. If you have content that is going to match up
to content in
the topdiv, you will need to keep same size &
margins.</div>
</body>
</html>
"Cyberhuntera" <[email protected]> wrote in
message
news:[email protected]...
>I want a background design image(1000x800) center;top and
a repeating
> background image(5x5) wich is behind the background.
>
> I am novice still, but I want to learn everything about
HTML.
> For now I know basic HTML and CSS - almost nothing about
it :(
>

How to do the background image for a site

Hi.
First, thanks for reading this.
I'm planning on using a gradient image as a background on a new site with black on the sides gradiating to blue in the middle which I created in Photoshop. The site is designed for 1024 (955) and up. How would I handle the background image so that no matter what the resolution above 1024, the visitor will see the gradient properly, meaning the blue will always be exactly in the center of the page and the image does not tile horizontally? (I don't want it to repeate from left to right when someone's resolution is really high)
I have seen a couple of sites that use solid images that appear to stretch the background image depending on the resolution, but have not been able to figure out the CSS code. In my case, I can have a single image that's say 5 pixels high, whatever width I need for the maximum (reasonable) resolution, and let it repeat from top to bottom.
Thank you.
MFitz721

Thanks for your reply, SnakEyez02 .
Another concern is wide-spread compatablilty on the largest number of browsers and PDAs possible, so it sounds like using the method you suggested would not be an option. What would you say is my next best option? Should I just design it for 1024 pixels wide (or perhaps 1440) and let what happens happen?
Thanks again.
Fitz21

Noob: Background is wider than background image

Hi, I created my website in photoshop cs5 now i've imported all my sliced images into DW CS5 and my site is set up just the way i like it but for some reason my page is extra wide and i can see the gray background area to the right of my background image. How to I get rid of this.

Instead of one static image, you would need to use a small, seamless background and repeat it horizontally and vertically with CSS to fill the browser viewport. Static images don't resize to viewport.
http://alt-web.com/Backgrounds.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Different background image (div) on each page of site complicated by template

Hope I can explain this: Below are specifics
- Using Dreamweaver cs5.5
- Making the pages from a template.
- Each page will have a different backround image; but the image is contained in a div tag (div name is .mainbackground) which runs behind the main core of the site, the image is not in the <body>
- The div .mainbackground is EDITABLE
- I have already made a specific css class to assign to that div on each page so that the image is different on each page.
- On the template page the div .mainbackground has no image class assigned to it (thus no background image)
- Since that div is editable I can then go into each page and assign the desired image class to it - works great. EXCEPT...... & here's my main question:
- In the code all of the other regions are contained IN that above mentioned div of .mainbackground SO that means that:
- if I need to update the structure of the pages I will have to remove the Editable region that controls the background image which would be - removing the .mainbackround editable region. Then go back to my template, make changes and save everything - thus all the changes will carry through to my other pages. This is good and bad because I would get all the structural changes but I would also loose all of the text specific to those pages.
-Then when I'm finished I would have to go back and first add an editable region back to the .mainbackground class and then re-apply the background classes back to the .mainbackground to fix the images on the pages again...
The site is very small site so I can deal with it but am I going about this all wrong?
Is there some template feature I'm not getting? I would like to keep using the template feature, and i do want a different pic on each page.....
I have attached a picture showing one page so you can see the background image - which will be different on each page.

If your Template has embedded CSS within the <head> tags, and the <head> has an editable region defined, you should be able to change styles in child pages.
TEMPLATE CODE:
<head>
<style type="text/css">
.mainbackground { }
</style>
</head>


CHILD PAGE CODE:
<head>
<style type="text/css">
.mainbackground {
background-image:url(page2-BG.jpg)
</style>
</head>
Give it a try.
Nancy O.

How to setup jpeg file as background image for all site pages and resolution stay same?

I have uploaded my new site to http://wwwtjhtestdec2012.businesscatalyst.com
I have background image set the same on all site pages but image is incorrectly zoomed way in on some pages (like Home page for example).
The Donate Page shows the correct resolution which I want displayed on all site pages.
How do I set all other site pages to match background image resolution of the Donate Page?
I am not sure what I am doing wrong that is changing this, or if it's possibly a bug?
I want the background image to be full screen on all site pages please advise how to resolve.
I would appreciate the assistance!
Thank you kindly!
Tammy

I have re-uploaded my site to http://wwwtjhtestdec2012.businesscatalyst.com.
If I set the Master page to Tile vertically that is only way I can get full screen background image of vegetables (without distortion).
Then however another issue occurs....
On Home Page of site I set same property to Tile and the background is better (no visible line where tiles meet---above the navigation tool bar--that is what I want for all pages associated to Master.
So logically, I tried setting a 2nd associated site page to same master, to Tile but on Statement of Faith Page, notice the horizontal line where tiles meet, above my navigation bar on that site page?
Why does Muse not handle both site pages associated to the same master identically?
Any of the other options besides Tile or Tile vertically cause the background to not fill entire screen.
Ideas?

Background image on iweb site not showing

I created a web site using iWeb sometime ago. I used all of the templates provided with the app. Since "me" has come along, all the content on my page displays, BUT the background image on ALL of the pages no longer shows. I republished the site to see if that would fix the problem, but no dice... Does anyone have any suggestions?

I am searching the boards here, because I am having the same problem. My husband's site had dropped the background image from just one of the pages. I re-built that page for him, and it was fine. Now I'm having the same problem with mine. Again I rebuilt the initial page with the error, but now multiple pages say they're missing the background jpg file. What's up with this? And how do we get it back without having to re-build each darn page???
I have made no changes to my computer. No new updates. Just one day it was there, and the next day it was gone. I am frequently accessing my website to make updates (at least weekly), so is this just some weird glitchy thing?
Thanks!

Is there a way I can add be background image to my sharepoint site with look and feel?

Whenever i add any background image with "look and feel" it stretches the image. I've tried modifying the CSS file (in body and tried .ms-backgroundImage setting "background-size:inherit !important;") to fix it, but it doesn't seem to
have any effect. I there anyway i can add a background image to the master html or css code and get it to not stretch?
Thanks
James T.F

Hi,
According to your post, my understanding is that you wanted to add background image to sharepoint site with look and feel.
We can define the Image Url in the Composed looks (Site Settings > Web Designer Galleries > Composed looks) to add background.
However, the image will be stretched to fill the viewport at 100%.
Though we can override the CSS attributes which would allow the image to repeat, but instead I recommend to go the no CSS route and switched the background to a much larger one that would fill the viewport nicely without looking pixelated.
More information:
SharePoint 2013 Branding: A New Approach
SharePoint 2013's Branding – My first three lessons
Best Regards,
Linda Li
Linda Li
TechNet Community Support

Background images flickering and turning black on scroll in published site, but in not preview.

The background images are very flickery and turning black when scrolling when viewing published site in Safari. This just started happening today after working on this for a few weeks now and the first time I'm noticing it. Everything is still ok in preview mode. All the large background images are optimized to be 500kb or less (they are all just placeholders).
http://ics0913.businesscatalyst.com
Any help would be appreciated. Thank you.

that is so strange, i had the location "image/rotator/......" for all three of my images in the js file and only the third one works?
i believe they are all loading up fine as of this moment, just like they were yesterday, but not this morning when i first arrived at work. i wonder what changes the location by itself.
hopefully the same thing won't happen again.
as for the text problem, thanks for pointing that out, i really appreciate it! but our office has been quite understaffed for a while, and no one here really knows anything about web maintenance. hopefully someone will fix those problems some day.
thanks again bregent!

Firefox wont load background image on some sites but internet explore will load the background

i downloaded firefox awhile ago worked perfectly fine then all a sudden it wont load facebook background images the homepage of facebook loads background image but when i log in it wont load background image but when i try internet explorer it loads the background images fine i checked every setting redownloaded everyhing nothing fix's it tho

If images are missing then check that you aren't blocking images from some domains (e,g, sphotos.ak.fbcdn.net).
*Check the permissions for the domain in the current tab in "Tools > Page Info > Permissions"
*Check that images are enabled: Tools > Options > Content: [X] Load images automatically
*Check the exceptions in "Tools > Options > Content: Load Images > Exceptions"
*Check the "Tools > Page Info > Media" tab for blocked images (scroll through all the images with the cursor Down key).
If an image in the list is grayed and there is a check-mark in the box "<i>Block Images from...</i>" then remove that mark to unblock the images from that domain.
Make sure that you do not block third-party images, the permissions.default.images pref should be 1.
*http://kb.mozillazine.org/Images_or_animations_do_not_load
There are also extensions (Tools > Add-ons > Extensions) and security software (firewall, anti-virus) that can block images.
Make sure that you allow pages to choose their colors and that you haven't enabled High Contrast in the Accessibility settings.
*Tools > Options > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
*http://kb.mozillazine.org/Website_colors_are_wrong
*http://kb.mozillazine.org/Websites_look_wrong

Background image in a div?

I know how to use css to place a background image inside a
div. However, I would like that image to be contextual, and be
differrent depending what the current page is. As an hypothetical
example, I would like a non-repeating background image of an apple
inside <div class="content"> when the page apples.html is
open, but then an image of a banana would be the background image
inside <div class="content"> for bananas.html.
If there is a way to place background images on the fly,
directly in the html, that would be the better solution for this
novice.
Thanks for any help!
r

Do it this way -
<style type="text/css">
div.content { background-repeat:no-repeat; }
#apples div.content {
background-image:url(/images/apple.jpg); }
#banana div.content {
background-image:url(/images/banana.jpg); }
</style>
(put this in the head of each page (or put the rules into a
site-wide
external stylesheet)
Now, on the apples page, change this -
<body>
to this -
<body id="apples">
and on the bananas page, change it to this -
<body id="bananas">
Get it?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Sbisa" <[email protected]> wrote in message
news:ffqvhs$5q6$[email protected]..
> Thank you!
>
> I will give it a try. I am googling for tutorials on
this, but if anyone
> has one in their pocket that they could share, much
appreciated.
>
> r

Site Wide Background image

Similar Messages

Maybe you are looking for