• 0

[CSS] Repeating background image

Asked by JoeC,

 Share

Question

Veteran

JoeC

Posted
Posted

Hi all, quick question about repeating a background image.

post-143397-1223259018_thumb.jpg

If you imagine that the image above is running across the top of a browser - the green/grey is one background image, applied to the <body> tag, for simplicity's sake. The washed out green/white is a second background image running across the top of a <div> inside the body. The solid green is the rest of the site, centred in the browser.

&lt;body&gt;
 With green background
 &lt;div&gt;With washed out background&lt;/div&gt;
&lt;/body&gt;

I'm trying to get the full colour image to align properly with the central part so the angled lines all match up properly, rather than having them meeting at odd places, which would look awful.

I've probably not explained this very well, so apologies for that. If you want any clarification on the question, feel free to say.

Link to comment
https://www.neowin.net/forum/topic/678304-css-repeating-background-image/
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Veteran

JoeC

Posted
  • Author
Posted

I can try. The washed out green stripes are a fixed width image, taking up 1000px in the middle of the screen. The full colour green stripes are a repeating tiled image of variable width.

Rather than have the tiling start from the top left and go across (which would almost certainly cause the two stripes not to match up like in the picture), I'm trying to get the flul colour stripes start tiling from the central div and go outwards, so they match up properly with the washed out ones.

Is that any better?

  • 0
Veteran

JoeC

Posted
  • Author
Posted

First off, just setting one as the main page background and one as the central div background would show something like this, 9 times out of 10:

eg2uo5.jpg

Secondly, would the semi-transparent PNG work in all major browsers without any messy workarounds? Specifically, IE7/6.

  • 0
Mentor

GreenMartian

Posted
Posted

IE6 doesn't like semi-transparent PNGs (without applying dirty hacks).

Try the following. Works on IE7+, Opera 9+, FF2+, Chromium. Sorry, no access to IE6 and below on my home PC.

#outside{
	height:20px;
	background-image:url("../img/stripe-dark.gif");
	background-repeat:repeat-x;
	background-position:center;
	text-align:center;
	padding:0px; margin:0px;
}
#inside{
	height:20px;
	width:500px;
	margin:auto;
	background-image:url("../img/stripe-light.gif");
	background-repeat:repeat-x;
	background-position:center;
}

&lt;body&gt;
	&lt;div id="outside"&gt;
		&lt;div id="inside"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;

http://tredosoft.com/Multiple_IE <-- Should help you test everything for IE 3.0 (heh!) up to 6.0

I tested using these 2 images: post-69069-1223312571.gif and post-69069-1223312561.gif

  • 0
Mentor

GreenMartian

Posted
Posted (edited)
Do GIF's work then?

Re-Edit: Sorry misread who posted what

Yes transparent GIFs work all right in IE6, and i think down to 5.0 or something. Might even be lower.

It's too bad they can not be semi-transparent.

Edited by GreenMartian
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • HONOR Robot Phone unveils first Cinematic Video at Shanghai International Film Festival

      By Steven P. · Posted

      HONOR Robot Phone unveils first Cinematic Video at Shanghai International Film Festival by Steven Parker Global AI device ecosystem company HONOR announced on June 13 that its revolutionary HONOR Robot Phone made its professional imaging debut at the 28th Shanghai International Film Festival (SIFF), demonstrating the result of its mobile videography capabilities for the first time. As the official mobile photography and videography partner of the 28th Shanghai International Film Festival, HONOR empowers this premier cinematic event with cutting-edge mobile imaging technology. Marking the global debut of the first cinematic video it captured, Robot Phone breaks down the boundaries between mobile imaging and professional filmmaking, ushering in a new paradigm for the deep integration of technology and cinematic art. In the video published on HONOR’s official channel (above), Robot Phone was used byELLEMEN to capture cinematic video portraits for the SIFF jury members. With its exceptional stability and cinema-grade imaging capabilities, the device redefines the art of portrait filmmaking, faithfully reproducing the rich tonal gradations and nuanced color transitions associated with film photography. The result is a new level of visual sophistication, creating high-end cinematic imagery that seamlessly blends atmosphere with narrative tension. The video released for the Robot Phone showcases the powerful stabilization capabilities of its built-in gimbal system, delivering exceptionally smooth handheld camera movement while preserving full image quality. By minimizing reliance on electronic image stabilization, the device effectively avoids the image cropping and quality loss typically associated with digital stabilization methods. Representing an innovative leap in form factor, the HONOR Robot Phone features the industry's smallest titanium alloy gimbal, delivering ultra-precision, extreme flexibility, and superior stability. Driven by high-performance motors, the gimbal rises dynamically, breaking free from the physical limitations of traditional camera modules. Combined with advanced AI algorithms that enable intelligent object tracking and various movements with stable shots, the device significantly simplifies video creation and reshapes both the equipment choices and creative habits of modern users. Notably, the Robot Phone will be the first product that features the results of HONOR's strategic technological partnership with ARRI, the world-renowned designer and manufacturer of professional camera technology for cinematic storytelling. From Cannes to Shanghai, the HONOR Robot Phone continues to lead the mobile imaging industry into an entirely new stage of development. Moving forward, HONOR will leverage cutting-edge AI and mobile imaging technologies to unlock new creative possibilities and extend cinematic standards for visual expression from the world of high-end filmmaking to the next generation of content creators. Learn more about the HONOR Robot Phone here: https://www.honor.com/global/events/honor-robot-phone/
    • Windows 11 KB5094126 BSODing, freezing, forcing BitLocker lockout, breaks OneDrive, and more

      By Captain_Eric · Posted

      I'll wait for the root cause analysis. Looks like it's HP, Lenova, and certain configurations that are askew, hardly "all of windows." Time will tell.
    • Microsoft Teams is getting a controversial location tracking feature that users may hate

      By Malisk · Posted

      We are several hundreds employees here that do, yes
    • Windows 11 KB5094126 BSODing, freezing, forcing BitLocker lockout, breaks OneDrive, and more

      By loaderbull · Posted

      Loading Topaz Photo AI freezes my system since this update...
    • Windows 11 KB5094126 BSODing, freezing, forcing BitLocker lockout, breaks OneDrive, and more

      By datacenter · Posted

      I had issues with my NVME, it was running really slow (like 2/3 mb bandwidth) ... had to reverted via System Restore and all is fine now.

  • Recent Achievements

    • Week One Done
      Jeroen Wilms earned a badge
      Week One Done
    • Week One Done
      rolfus earned a badge
      Week One Done
    • One Month Later
      Leroy Jethro Gibbs earned a badge
      One Month Later
    • Conversation Starter
      flexorcist earned a badge
      Conversation Starter
    • One Month Later
      AndreaB earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      510
    2. 2
      +Edouard
      200
    3. 3
      PsYcHoKiLLa
      137
    4. 4
      ATLien_0
      91
    5. 5
      Steven P.
      83
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!