Results 1 to 9 of 9

Thread: How to move a background image?

  1. #1
    Junior Member
    Join Date
    Aug 2010
    Posts
    26

    Default How to move a background image?

    I see on some sitestyles there is a black image background with a nav bar on top. This black image goes from left to right. Most of the time this is in the masterborder area. I found where I could say repeat the black image and set a vertical and horizontal starting position. But in setting them, the image would not reposition correctly.

    I want to have a wide large background image going from left to right, starting in the masterborder area, going under the layout area, and continuing to the right edge of the masterborder.

    Any idea how to do this? See http://www.hornellpartners.com as an example. See the green wide bar image going across?

  2. #2
    Senior Member franko's Avatar
    Join Date
    Apr 2010
    Location
    Tasmania Australia
    Posts
    2,642

    Default

    1. Make a very large image. Optimise it to the lowest file size that gives an acceptable repro.
    2. Place this as your background image, either in style view or in the manage styles dialog.
    3. Place your content in layout regions in Masterborder and layout areas. Set the background color/image of the layout regions to whatever you want.
    4. Add content to layout regions.
    5. You're done.

    The other way you can do it is to use an image resizer javascript. There was a discussion on this recently. Do a search of the forums and you'll probably find it, otherwise Google for a background image resizer.

  3. #3
    Junior Member
    Join Date
    Aug 2010
    Posts
    26

    Default

    Thank you franko for the reply. As a followup the http://herronpalmer.com/ page appears to be created by three images. The left masterborder image that changes width depending on the browser or screen resolution. The right masterborder image that changes width depending on the browser or screen resolution. Last the layout region with has a fixed width.

    My concern with using just a very large image is that it will not change to go from side to side depending on the browser or screen resolution. Am I correct?

    Sorry I listed the wrong website in my first note.
    Last edited by droberson; 05-10-2013 at 12:22 PM.

  4. #4
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,732

    Default

    You can set a background image globally for your site in Style View. You can use a small image that will be automatically tiled horizontally and vertically unless you tell it otherwise.

    To create an "banner" type of colour or repeating image that is only across the top and expands to the full browser width, you can create a narrow slice and tell it to repeat only horizontally. For example, on the example you mention, the image is 20 pixels wide and 743 pixels tall, and repeated across the page. Like this:

    Click image for larger version. 

Name:	bg_stripe.gif 
Views:	307 
Size:	208 Bytes 
ID:	1425
    (NOTE: If shifted the white colour a bit to light blue so you can see it against the white background here.)

    So create an image with the colour or colour variations you want. Your image doesn't have to be that large. You can make it just a pixel or two wide and the height you want it to be. Then do the following:

    Go to Style View in the Graphic display, scroll down to the bottom and click in the area below where is says Page Background.
    In the Page Background Properties panel on the right, where is says "Image:" click on the button with the dots [...] and navigate to you image and select it. Typically, at this point, is will be tiled vertically and horizontally to fill the page.
    Still in Style View, click on the CSS Code tab.
    Scroll until you find the BODY tag.

    Depending on whether you started with a copy of an existing site style, or started with a "New Blank Sitestyle", you will see something like this:

    HTML Code:
    BODY {
    	background-image: url( "Images/Background.gif" )
    }
    Or this:
    HTML Code:
    BODY {	background-image : url( "Images\\background.png" );
    	background-repeat : repeat;
    	font-family : Open Sans ;
    	font-size : 14px;
    	color : rgb(51,51,51);
    	background-color : rgb(250,250,250)}
    You will want to ADD or EDIT the background-repeat tag to read as follows:
    background-repeat : repeat-x;

    And that should do it. The image you've selected will repeat horizontally to fill the browser window no matter what size it is (or what size your page is.)
    Ray Cambpell
    Sounds In Sync
    Linked in

  5. #5
    Senior Member mia's Avatar
    Join Date
    Apr 2010
    Location
    Germany /Deutschland
    Posts
    809

    Default

    I never bother with the "Page Background".
    Goes a lot easier and faster if you do it like that:

    Go to Style View, mark Body, select tab background, select your picture and the other options, repeat vertically or horizontally, or stay fixed....
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	background.jpg 
Views:	373 
Size:	76.7 KB 
ID:	1426  
    http://www.nof-community.de
    NOF-Community, Hilfe, Support, Tutorials, Anleitungen, Tipps und Tricks für Netobjects Fusion und SwissKnife Komponenten

  6. #6
    Senior Member RayC's Avatar
    Join Date
    Apr 2010
    Location
    Toronto-ish, Canada
    Posts
    1,732

    Default

    Well, what other secrets are you keeping from me, große Schwester?
    Ray Cambpell
    Sounds In Sync
    Linked in

  7. #7
    Senior Member mia's Avatar
    Join Date
    Apr 2010
    Location
    Germany /Deutschland
    Posts
    809

    Default

    Well, you never stop to learn, little bro....
    http://www.nof-community.de
    NOF-Community, Hilfe, Support, Tutorials, Anleitungen, Tipps und Tricks für Netobjects Fusion und SwissKnife Komponenten

  8. #8
    Junior Member
    Join Date
    Aug 2010
    Posts
    26

    Default

    Thanks everyone, I got it working.

  9. #9

    Default

    Hey do you also want to change your background image in WhatsApp too, then you should download this OG WhatsApp from here https://gbapps.net/ogwhatsapp-apk/ and make this possible.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •