473,807 Members | 2,856 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

background repeat for two images on header area

4 New Member
I wanted a liquid layout heading for my webpage. as its a unique image i took a slice from the left edge and added it to a div. then placed the main heading image in another div and floated it to the right. my logic is that it can resize and fill the growing/shrinking white-spaces with the contents of the left div.

hi, iam at www.lovebirdwed dings.co.uk

as you can see (if you run the problem) i haven't quite got it right. any help would be nice as i'm now all out of ideas.
Apr 8 '10 #1
7 3143
drhowarddrfine
7,435 Recognized Expert Expert
Something to go on. Get rid of the left div. It's only in the way. Add html,body{heigh t:100%} to your CSS. Change background-position in the right div to only 'center'. Add 'height:100%' to the right div.

That should center everything fluidly but it still needs adjustments.
Apr 8 '10 #2
mrjoz
4 New Member
sorry but this doesn't work. as the image is split colour (blue/green) at varying heights it doesn't flow correctly. which is why i had the image placed to the "right" in the first place...so's to avoid half the problem.

i was thinking maybe the "white-space" command might have helped, though i couldn't find that out.
Apr 8 '10 #3
drhowarddrfine
7,435 Recognized Expert Expert
Are you saying you want the blue to be on the left/right all the way across?
Apr 8 '10 #4
mrjoz
4 New Member
i'm on a 19" screen so its easy for me to see the error.
from the link http://www.lovebirdweddings.co.uk if you break out of full screen mode and resize the whole IE/FF window you'll see......

image on the right - correct
slice on the left - correct

on resize: green body of page changing size - not wanted.
but i do need to keep the green. so i assumed i needed to somehow make the slice duplicate to fill the gap created.

that make more sense ? :D
Apr 8 '10 #5
drhowarddrfine
7,435 Recognized Expert Expert
No because, on a larger screen, there's a gap between your left image on the left side so it doesn't look correct so we're seeing two different things but I think I know what you're trying to do now. Gotta run for the moment.

There's an easy CSS3 fix for this but it only works in modern browsers, not IE.
Apr 8 '10 #6
drhowarddrfine
7,435 Recognized Expert Expert
The solution is similar to a "sliding door effect". You can Google for that. It's essentially for tabbed navigation but you'll see how it's the same as what you're trying to do. I tried from memory but keep getting interrupted and a little bit of image editing needs to be done.
Apr 8 '10 #7
mrjoz
4 New Member
i must be more of an expert than i thought. problem solved thanx....to me ;) lol
May 11 '10 #8

Sign in to post your reply or Sign up for a free account.

Similar topics

2
10482
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all have the same name and reside in the following physical path structure:
21
20656
by: Dan V. | last post by:
I have tried a number of things including preloading, but the background image (water tile in header) in IE 6 will not display where other browsers will. http://www.officeactivate.com/web-site-design.shtml Any ideas? thanks.
1
3605
by: dudelman | last post by:
Hi Folks, I have stumbled over this website <http://www.westciv.com/style_master/academy/css_tutorial/index.html> and I wonder how they manage to invert the colors of the fixed background image when scrolling downward and the blue header moves away. I do not find any directive of the header beckground which tells to invert the underlying bg image. Any hints?
4
3062
by: lindsey.crocker | last post by:
I have this links list with background images set on them which changes when they roll over. The <td> is set valign="middle" however as soon as you apply the rollover to the link, the text jumps to the top of the <td> instead of staying middle. I can not put padding on the top as some links are 2 lines and some are 1 line.
3
2041
by: ribinha | last post by:
Hi all, I am having problems loading background images on my pages. I have created a css to display the images. It works just fine on my test box, but when I tried on real pages it wont upload any images everythin else displays just fine. I used a table and added a background image to every row. when i call the page it shows that it is preloading images but never displays. I have tried to place the css code on the page itself as well. the...
2
2750
by: rigiditymodulus | last post by:
Hi - So, I had this working perfectly, then had a small crash (the transmitter for my wireless mouse occassionally freaks out my MacBook Pro) and when I rebooted and opened up my file the two layered DIVs I had were no longer showing up correctly. I had this going fine for several hours -- it wasn't a happy accident I forgot to save. I'm totally mystified on this one. Here's the summary: I want #container to be under #containerbranch, so...
1
1649
by: sharkyboy | last post by:
Hi, I am developing a microsite on the end of our current church website. See www.the-ark.net/chooseblue I built the site using css/html then plugged it in to the existing asp cms we have. My issue is with css/html... The container background only seems to stretch down as far at the header when viewed in firefox (it is ok with ie7 & dreamweaver preview). I can't fathom why. The css and html seemed to validate ok. Any ideas?
2
4812
XedinUnknown
by: XedinUnknown | last post by:
Hi! I am new to this forum, but not new to web design and programming. Nevertheless, I have never tried to use PNG so extensively in my pages. here's the problem. First, I have found that the PNG backgrounds and images had no transparency and grey around them when viewed in IE6, but I solved this bug using this hack. It works great, but then another problem came up: a background image that had the solution applied to was not repeating...
10
5766
by: VividWeb | last post by:
Hi. I am relatively new to CSS and HTML but have a basic understanding of most things. One of my backgrounds is not positioning correctly in IE 7 or AOL. The background behind the content (small chocolate area) is positioning slightly down the page instead of at the top. I have used the same techniques in the navigation and it positions fine. Its fine in Fire Fox Opera & Safari. I have run my HTML & CSS through W3c and all is clean. ...
2
14079
by: thephatp | last post by:
I'm having a problem with IE rendering correctly. I'm experimenting with using all div's in my pages now, and I'm not very familiar with the quirks of IE. I have created a sample page, and I'm really confused as to what is going on in IE. FF renders the page exactly as I expect. IE renders the page with everything in the correct location, but it seems to double the background image for a sub-div section that is moved up using a negative...
0
9721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9600
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10628
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
10373
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
10374
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
1
7651
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
6880
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5685
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4331
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.