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
Similar Messages
-
Is there a way to stretch a background image rather than repeating it?
I have a one celled table with a background image. It's really just a gradient strip (gradient going from top to bottom - ending in fade to white). I want the image to continue all the way across the page. If I set it to repeat via X, somehow you can see where the repeat begins... so I was wondering if there's a way to just stretch the image from left to right to force it to fit exactly to 98% of the window no matter how big the window is.
Thanks...
kb
(RH10 for Webhelp)That's not entirely true. With CSS, you can stretch a background image to any dimension:
background-size: 10px 100%;
Also see: CSS3 background-size property
Kind regards,
Willam -
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> -
Gif loader for background image
I simply want to run an animated gif while my background image loads for a slideshow.
I've searched the web and this forum for hours and can't get the various bits of code tips (ajax, jquery) to work because I'm a totaly idiot when it comes to code...i've tried cutting and pasting in many different configurations but can't get anything to work properly.
Can someone help me out to get this to work?
I have this slideshow:
http://www.piquecollaborative.com/fox.html
and want an animated gif to run during load of each page
gif is this:
http://www.piquecollaborative.com/images/loading.gif
here is my code for the page(s)
<!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="Matthew Fox Residence by PIQUE architecture, Peter Jahnke, Eric Meglasson" />
<meta name="keywords" content="pique llc, architecture, emerging architects, young architects, northwest, peter jahnke, eric meglasson, keith ballantyne, collective studio, collected design" />
<title>PIQUE: Fox House</title>
<style type="text/css">
.projectpage {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
body,td,th {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333;
font-size: 12px;
body {
background-image: url(images/fox-01.jpg);
background-repeat: no-repeat;
#title {
position:absolute;
width:350px;
height:65px;
z-index:1;
left: 10px;
top: 10px;
#apDiv1 {
position:absolute;
width:108px;
height:161px;
z-index:2;
top: 3px;
left: 8px;
#apDiv2 {
position:absolute;
width:237px;
height:160px;
z-index:3;
left: 118px;
top: 3px;
text-align: right;
#text {
position:absolute;
width:351px;
height:194px;
z-index:4;
left: 10px;
top: 90px;
background-image: url(images/fox-01.jpg);
#project-text {
position:absolute;
width:355px;
height:300px;
z-index:5;
top: 288px;
text-align: justify;
left: 13px;
#right-arrow {
position:absolute;
width:90px;
height:330px;
z-index:6;
left: 915px;
top: 270px;
</style>
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body class="projectpage" onload="MM_preloadImages('images/arrow-rt-inv.png')">
<div id="title"><img src="images/fox-title.gif" width="350" height="65" /></div>
<div class="projectpage" id="text">
<div id="apDiv2">Fox House<br />
central Oregon<br />
single family residence<br />
4175 sqft<br />
2010<br />
Timberline construction, Elemental engineering </div>
<div id="apDiv1">name:<br />
location:<br />
type:<br />
size:<br />
year:<br />
collaborators: </div>
<img src="images/line-dot-small.png" width="361" height="5" /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<img src="images/line-dot-small.png" width="361" height="5" /> </div>
<div id="project-text">
<p> This home sits on a bluff overlooking rolling sagebrush meadows in Oregon’s High Desert with views of the Cascade Mountains dominating the western horizon. The owners, Matthew and Margherita Fox requested an extremely durable and energy efficient home for their family. The request for a net zero house necessitated extensive use of photovoltaic panels, ground source heat-pumps, careful consideration of day lighting and shading strategies, and a super-insulated structure. </p>
<p>Italian architect and childhood friend Maria Chiara Trevisan created the original vision for the structure as a gift to the Foxes. The three masses, originally conceived as parallelepipedo (rectangular cubes) resting at various angles in the earth, evolved into three shelled structures clad in stone, a loose reference to the Three Sisters mountains which dominate the home’s view.</p>
<p>Photos by Nicole Werner, Bob Woodward, Peter Jahnke</p>
</div>
<div id="right-arrow"><a href="fox02.html"><img src="images/arrow-rt.png" alt="" name="Image1" width="48" height="48" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','images/arrow-rt-inv.png',1)" onmouseout="MM_swapImgRestore()" /></a></div>
</body>
</html>
can anyone help me get a leg up on this? Sorry to be such a noob. This is not my trade and i have more respect for you all now than ever before! sorry again,You might want to reconsider the use of absolutely positioned div's for layout purposes...
it often leads to big difficulties.http://www.apptools.com/examples/pagelayout101.php
Regarding your loading gif, try defining a container for the picture
and position your loading gif as a centered non-repeating background for container
and insert your image in the container. -
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 can I get a parallax effect with Hub Control or change the background image scroll rate?
Like the title says, I'm trying to get more of a parallax effect with a Hub Control in Windows Phone. In my current hub app, the picture has to be as wide as the entire hub, and it scrolls through the picture quickly. I'd like a way to make the background
image scroll slower than the content on top of is.
I've looked everywhere in the API docs, but I can't find anything saying how to do this. :(Hi PTK7,
Yes, currently there is no documentation for this effect, however we can manually control the image scroll speed:
http://stackoverflow.com/questions/10589192/windows-8-gridview-parallax-background-image
Also I found a sample from code center:
https://code.msdn.microsoft.com/windowsapps/ParallaxBackground-A-Metro-f929e558, take a look to see if these helps.
--James
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey. -
Background Image Question (CSS)
I have the following CSS style in my head section:
body { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
...where TopGradBlack.jpg is a black-white gradient measuring
500 pixels
high by 5 pixels wide. The image displays as it should, with
the page
appearing black at the top, grading into white below.
But I want the background to consist of a black-white
gradient on the
left half of the page only, with a blue-white gradient on the
right
half. So I inserted a div (ID = Body2) inside the body and
added another
style, as follows:
body { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlack.jpg) 0 0 repeat-x; }
#Body2 { margin: 0px; padding: 0px; text-align: center;
background: #fff
url(/images/Home/TopGradBlue.jpg) 50% 0 repeat-x; }
But it doesn't work. Rather than displaying from the middle
of the page
rightward, TopGradBlue.jpg dispays clear across the page. If
I change it
to 0 50% repeat-x, then it works as it should, displaying
across the
middle of the page. But when I change it back to 50% 0
repeat-x, it
displays clear across the top of the page.
What am I doing wrong?
Thanks.I would NEVER use GIF compression with gradients.
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
==================
"darrel" <[email protected]> wrote in message
news:fu7s37$ja0$[email protected]..
>> So, in other words, it can't be done?
>
> If your gradient is vertical (from top to bottom) just
make the image very
> wide...like 1000 pixels, and save it as a GIF (Gifs
compress really well
> with horizontal bands of the same color). Then do just
as you're doing,
> but omit the 'repeat'.
>
> Otherwise, I assume you're trying to create two columns?
Perhaps the
> solution is to make the gradient a background of the
column wrapper DIV
> isntead of making it a standalone DIV just for the
image.
>
>> similar things before. Also, the percent locator
works on vertical
>> alignment, so I assumed it would horizontally, too.
>
> It 'worked' on vertical because you weren't repeating it
vertically.
>
> -Darrel
> -
Pinning Multiple background images
Hello,
I am working on a site and want to get an effect similar to this site: http://mariusz.cc/ that has multiple "pinned" background fill images. Content boxes and photos scroll over the background images yet when you scroll down you get new backgrounds. Simply using the "pin" feature on Muse will not allow you to scroll past the image. The new parallax scroll feature does not work on full browser width content, from what I saw, so that's a no go as well.
Does anybody have any ideas on how to replicate this? Thank you in advance.Matt --
You are correct, 100% width objects do not currently work with scroll motion objects (for the moment ;-), but you can achieve this effect by creating extra wide images that are likely wider than most desktop systems. Two Muse template resources -- MuseThemes.com and MuseGrid.com have templates that are using this approach -- MuseThemes.com created a video describing the step-by-step process that you can review here: http://www.muse-themes.com/pages/video-training. Hope this helps. -
My background image (945 px wide) is larger than my Flash
window (620 px wide). When a user moves the cursor left or right, I
want the background image to move in that direction but only as far
as the edge of the image and when the cursor stops moving so should
the image. I will also have hot spots in various places that will
be clickable. I tried this code (see below), but it doesn't quite
do what I need. For one thing it continues to scroll beyond the
left and right edge of the background image. Another problem is
that the image keeps moving even though the cursor stopped, which
make it near impossible to click on my hotspots.Hey,
I have thought of using this for the exact reason. I haven't
got around to using the hotspots but check out this tutorial. I
think this what you mean.
http://www.kirupa.com/developer/flash8/interactive_image_pan.htm -
Resizing 1) background images and 2) div's containing images
I just created a web page consisting of little more than an image (about 900 pixels) wide which is set at width=100% in a style sheet. It works great, but I'd like to substitute a smaller image (to reduce page loading time) in mobile devices.
If it was a background image, I could just declare two different background images based on screen size, but I don't know of any way to swap between images actually inserted in a page.
So, is it possible to give a background image a width in percentage, similar to a static image? In other words, if my screen was 651 pixels wide, then a static image inside a container spanning the entire screen should also be 651 pixels wide. Can I rig it so that a background image in that container would also be 651 pixels wide?
Of course, the obvious problem is height. If a background image measures 900 X 1200 pixels, and a screen is 600 pixels wide, then even if there's a style that makes the image 600 pixels wide, it would also have to calculate a height of 800 pixels, and I'm guessing that can't be done.
Anyway, I'd just like to know what kinds of tricks one can use in making background images and divs containing static images display in percentages based on screen size.
Thanks.Use background-size:cover; for your background images.
Further reading: http://css-tricks.com/perfect-full-page-background-image/
EDIT:// For swapping out placed images, it's a little harder to do right now as there is no specified solution from W3C. Some people want to use the srcset attribute, others the <picture> tag. There is no perfect approach right now. See: http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good- thing/
One idea is you could hide the image and then load a background-image in the container which is smaller in size. But this would likely bloat your HTML and CSS as you use multiple images - the device will also load both images so you don't gain any real advantage unless you intend to show a croppoed or different image.
Other ideas: http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/
<div class="image">
<img src="YourImage.jpg" alt="" width="500" height="250" />
</div>
@media only screen and (max-width: 480px) {
.image img {display:none;}
.image {
background:url("YourImage_Mobile.jpg") no-repeat 0 0;
background-size:cover;
Another idea is to show/hide the relevant image:
<img src="YourImage.jpg" alt="" width="500" height="250" class="desktop" />
<img src="YourImage_mobile.jpg" alt="" width="300" height="180" class="mobile" />
@media only screen and (max-width: 480px) {
.desktop {display:none;}
.mobile {display:block;} -
Background image doesn't fill window in fullscreen mode
Guys I have an image which is bigger than stage, but when I play this movie in player the background image is cropped on each of sides, that is on left and right there is a gray margin around 2cm wide.
Any ideas how to fix this so the background image covers entire stage?
Thank you.Hi, Thanks for your reply, here is the image, and I've marked the margins with read line.
Thank you. -
Background image causes horizontal browser scrollbar
We have a large background image on a website so that people can change the size of their browser window amd still see the background image. The image is also part of the page design so we can't use any of the scale options. All page content is centred and there are no objects other than the background image anywhere outside the 940 pixel wide centre column.
The problem is that the background image is causing the horizontal scroll bar to appear at the bottom of the browser, which is undesirable. Worse is that the scroll bar is not centred, it is instead all the way to the left. Can this behaviour be fixed in the next update please?Figured out what was causing it (the footer, d'uh!). Any ideas on how to fix the footer up so it doesn't do that? The footer has an image the same width as the page background.
-
How do they get background image to span browser width?
At http://www.archerschoicemedia.com, they have a background image at the top that spans the entire browser width. How is that achieved? What if image isn't as wide as screen resolution, won't it just repeat?
All help with adding a background image that does this - spans the entire browser width - is what I'm after.
Thanks!What if image isn't as wide as screen resolution, won't it just repeat?
No.
The CSS reads
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:url(../i/backgroundvid.jpg);
background-position:center top;
background-repeat:no-repeat;
background-color:#000000;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
overflow-x: hidden;
overflow-y: auto;
So, the CSS is set to horizontally center the background image and not repeat it.
Plus, on screens wider than 1689px wide, the background color of black (#000000) shows through at the edges creating the impression that the background is endless. -
[SOLVED] Set background image without feh
I've been setting my background image by using "feh --bg-fill [path to image]" but I would like to move to a simpler alternative such as imlibsetroot, hsetroot, xsetbg, etc. The problem is that I haven't been able to find a way to get any of these programs to do exactly what feh's --bg-fill option does. That is, the image should scale up or down, while maintaining its aspect ratio, until either its horizontal or vertical edges meet the sides of the screen and there is no empty space visible. Basically, I want the program to push part of the image off the screen if that's what it takes to fill the whole thing.
Is there a way to do this that I'm just missing?
Last edited by zcal (2012-08-05 16:29:50)Trilby wrote:Use an image editor to scale/stretch your image to match your screen's resolution. Then use one of the *setroots.
This was my first thought, but I move between three separate screens of different resolutions. I've resigned myself to being stuck with feh for now. Thanks for your suggestion, though!
Edit:
Worked up a solution similar to this but that doesn't require editing any image files. imlibsetroot has an option (-s X,Y) for scaling an image to a set X and Y number of pixels. Since I use a couple of custom shortcuts to toggle screens with xrandr, I just tacked on imlibsetroot with the appropriate number of pixels for each screen. This allows me to set the image width or height to be wider or higher than the screen if necessary to completely fill up the background, it just means I need to do some simple math to get the right dimensions.
Here's an example for an image of 1440x864 on my 1280x1024 monitor:
xrandr --output LVDS --off --output VGA-0 --auto && imlibsetroot -s 1707,1024 -p c ~/look/background
Admittedly this solution would suck if I changed my background on a regular basis, but I don't.
Last edited by zcal (2012-08-05 16:32:25) -
When I find a suitable picture to use as wallpaper" I often right click and use the menu item "Set as Desktop Background". The file ""example.jpg" is saved in directory\folder "/home/user" rather than for example "/home/user/my wallpaper" or in the directory
"/home/user/Downloads". The latter as being set under the "Downloads" section on the "General" tab in the "Preferences" dialog box.
Is there a configuration file where I can change the default location to save my "Set as Desktop Background" images. Or better still can the menu be customized to launch the application that allows me to set my desktop wallpapers?
I am using the "PCLinuxOS" Linux OS but I have encountered this issue in many if not all the Linux distributions I have sampled.Don't use "Set as Desktop". Use ''' "Save Image As..." ''' instead, and file it with your other "wallpaper" images so the operating system has access to those images.
IIRC, Firefox saves a "desktop image" to the Profile folder, and it will only save one image, at that. Change the image and the previous one is gone.
Maybe you are looking for
-
My mac freezes when i plug in my flash drive.
I want to know if this is a serious problem, or if i need an update or something. It was working fine a few hours ago with the flash drive and everything, but i just plugged in the flash drive again, and EVERYTHING froze. the mouse would still move a
-
How to save a watermark in quicktime 7?
Hi, I have quicktime 7 and I have problem saving a watermark I've added in video properties... any tips to save/export the changes?
-
Raise Form_Trigger_Failure Problem..?!
Hello All.. i have a problem indicates that most of raise validation doesn't work..Does anyone knew some suggested reasons for that strange case..pls? Regards, Abdetu..
-
Helli dear Friends please help me i have macbook air and the IT HAS windows inside along with os x THE PROBLOM IS THAT Windows is realy "BLURRED" from some reason while the osx operating system is just fine !!! WHAT SHOULD I DO ?!!
-
hi in which table i wil get link between material and MICs ? and i also want table for long term inspection in Control indicator