5 Replies - 1265 Views - Last Post: 31 March 2013 - 07:14 AM

#1 PointHvnwrd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-March 13

Moving Background Image to Left

Posted 28 March 2013 - 12:47 PM

I am helping someone with their site. Right now it is tacked onto the back of my own, as they don't have a host provider yet. Here is the link to their Home page (so far) http://pointheavenwa...iamese/home.php

I'm looking for ideas of what to do to correct the problem of the background image being obscured with the header/body/footer sections. I would appreciate any ideas.

A good bit of this image has been cropped off. (Full background image can be seen on this page. http://pointheavenwa...mese/index.php) I'd like to use the WHOLE image, have it fixed to the left hand side of the pages, have the background color blackish-blue, and have their header/body/footer section over to the right. This way her full image can be seen.

However, I don't know how to do this. ://>

Here is the css code I have so far.

 

body.home, body.males, body.females, body.available, body.contact {
	background-image: url(imgs/blue-Siamese.jpg);
        background-attachment: fixed;
        Background-color: #060B10; /*bluish black*/
	background-position: center;
        background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;    
}




Appreciate any ideas/help. Thank you so much for your time!!

This post has been edited by modi123_1: 28 March 2013 - 12:54 PM
Reason for edit:: fixed botched code tag


Is This A Good Question/Topic? 0
  • +

Replies To: Moving Background Image to Left

#2 modi123_1  Icon User is offline

  • Suitor #2
  • member icon



Reputation: 9487
  • View blog
  • Posts: 35,767
  • Joined: 12-June 08

Re: Moving Background Image to Left

Posted 28 March 2013 - 12:56 PM

First off - comic sans?!

Posted Image

Next - the image is scaling with the webpage.. when I first opened it up I could see most of the background image.. If I started moving the edges around then the image size would be modified as well. You may want to look into that.
Was This Post Helpful? 0
  • +
  • -

#3 BenignDesign  Icon User is offline

  • holy shitin shishkebobs
  • member icon




Reputation: 6213
  • View blog
  • Posts: 10,727
  • Joined: 28-September 07

Re: Moving Background Image to Left

Posted 28 March 2013 - 12:58 PM

You could set it up in columns, place most of your content in the left and right columns and leave the center column empty as kind of a showcase for the background art.
Was This Post Helpful? 0
  • +
  • -

#4 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Moving Background Image to Left

Posted 28 March 2013 - 03:37 PM

Do you mean something like this?
Posted Image
Was This Post Helpful? 0
  • +
  • -

#5 PointHvnwrd  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 28-March 13

Re: Moving Background Image to Left

Posted 28 March 2013 - 04:46 PM

Yes, I tried that, but in a smaller screen the body section will still over lap the background image. So...I'm back to having it on top.

The FONT...I do NOT like it. I have used "GangueOuais" for all my headings which is an "art deco" font and goes along with her style. It shows like it should on the Index page http://pointheavenwa...amese/index.php because I put it on top of the image, but the other pages it shows the Comic Sans...and in the process distorts the size of the header. (Something else I'm not really sure how to fix.) I have a newer computer so it shows up on mine, but using my husband's older lap top, it shows as the font above. And YUCK!!

I thought I had done this one other time so it had an internal link and would show the correct font (even on computers that don't recognize it), but I've forgotten how to do it. Probably have to look that up again.

Thank you all for your replies. I appreciate them. Hoping to hear back from the lady whose site this will be if she wants me to continue on with this background image or if she wants to use another one.

Can someone share what I need to do on my Index page http://pointheavenwa...amese/index.php for it to NOT scroll that little bit. I've tried several things (ie. "fixed") but not make it stop. This is my current css coding.


body.index {	
	background-position: center;
	background: #060B10; /*bluish black*/
	background-repeat: no-repeat;
	position: auto;
        margin: auto;
        margin-left: auto;
        margin-right: auto;
        width: 767px;  
        height: 1000px; 
        margin-top: -20px; 
}




Thank you again for all your help!
Was This Post Helpful? 0
  • +
  • -

#6 Jeffsmitth  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 18
  • Joined: 31-March 13

Re: Moving Background Image to Left

Posted 31 March 2013 - 07:14 AM

Thanks MR. FerretHolmes. You did good job. But I am not sure which language you used. Is it possible in HTML, If yes then what code will be?


I am waiting your response
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1