The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> CSS image behind text - Failed :(
Lensmeister
post Sep 26 2013, 06:58 AM
Post #1


Newbie
*

Group: Members
Posts: 17
Joined: 21-November 12
Member No.: 18,131



Ok I may be a complete muppet, but I have tried a number of sites, tutorials etc. but I still keep failing to get this to work.

My main.css code is thus:

CODE

.float-right {
    clear: right;
    float: right;
    margin: 0 3px 0 3px;
}
/* Layout Stylesheet */


body{
margin: 0px;
padding:0;
background: #808080;
color: #333333;
}
        
#lh-col{
    position: fixed;
    top: 20px;
    left: 20px;
    width: 180px;
    border: 2px solid #000000;
    background: #c0c0c0;
    color: #333333;
    margin: 0px;
    padding: 0px;
    height: 750px;
    list-style-type: none;
    list-style-image: none;
}


#rh-col{
DOES IT GO HERE?

margin: 20px 20px 20px 220px;
border: 2px solid #000000;
background: #ffffff;
color: #333333;
padding: 20px;
height: 710px;
overflow:scroll;
}
story {
    font-style: italic;
    font-weight: bold;
}


On the right hand column (#rh-col ) I would like the have the image image1.png to go behind the text and fill up the entire coulmn.

OK

I have tried using this
CODE

background:url(img/image1.png) no-repeat;
width:100%;
height:100%;
z-index:-1


in the code I have placed where I thought it should go.

But nothing seems to work ..


Thanks for any help in advance.

smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 26 2013, 08:08 AM
Post #2


Computer says no.
********

Group: WDG Moderators
Posts: 18,958
Joined: 9-August 06
Member No.: 6



If you place it THERE it will be overridden by 'background: #ffffff' that comes later down in the same rule. Put it all together, like this.

CODE
#rh-col  {
...
background: #fff url(img/image1.png) no-repeat;
...
}


Background is a shorthand property for all the other background properties, and the values you don't use will be reset to their initial (sort of default) values. So when you say background: white it sets the background image to none.
http://www.w3.org/TR/CSS2/colors.html#propdef-background
http://www.w3.org/TR/CSS2/colors.html#prop...ackground-image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 26 2013, 08:11 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,497
Joined: 10-August 06
Member No.: 7



QUOTE(Lensmeister @ Sep 26 2013, 01:58 PM) *

On the right hand column (#rh-col ) I would like the have the image image1.png to go behind the text and fill up the entire coulmn.

OK

I have tried using this
CODE

background:url(img/image1.png) no-repeat;
width:100%;
height:100%;
z-index:-1


That may make the #rh-col element 100% high and wide, but not its background-image. To resize the background image you can use background-size:
http://www.css3.info/preview/background-size/
http://www.w3.org/TR/css3-background/#the-background-size

Also beware of using negative z-index values, since other elements with backgrounds may obscure them.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lensmeister
post Sep 26 2013, 08:54 AM
Post #4


Newbie
*

Group: Members
Posts: 17
Joined: 21-November 12
Member No.: 18,131



I am guessing therefore that it needs to be:

CODE

#rh-col{
background:url(img/image1.png);
background-attachment: absolute;
background-size: 75;
background-color: #ffffff;
background-repeat: no-repeat-y;
margin: 20px 20px 20px 220px;
border: 2px solid #000000;
color: #333333;
padding: 20px;
height: 710px;
overflow:scroll;
}


Almost sorted: Now multiple images, when one is wanted and it to fill the rh-col area.

This post has been edited by Lensmeister: Sep 26 2013, 09:10 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 26 2013, 09:08 AM
Post #5


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



It would be much easier for us to help you if you can post the url of the page or a test page.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lensmeister
post Sep 26 2013, 09:11 AM
Post #6


Newbie
*

Group: Members
Posts: 17
Joined: 21-November 12
Member No.: 18,131



QUOTE(Frederiek @ Sep 26 2013, 03:08 PM) *

It would be much easier for us to help you if you can post the url of the page or a test page.


The web pages are currently on my memory stick as I try to get the pages working before I upload.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Sep 26 2013, 09:15 AM
Post #7


Programming Fanatic
********

Group: Members
Posts: 5,146
Joined: 23-August 06
From: Europe
Member No.: 9



Then, either post the HTML and CSS or attach the files (or use a zipped file, so the image comes along too) to your post.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 26 2013, 09:44 AM
Post #8


.
********

Group: WDG Moderators
Posts: 8,497
Joined: 10-August 06
Member No.: 7



QUOTE(Lensmeister @ Sep 26 2013, 03:54 PM) *

background-attachment: absolute;

Incorrect value.

QUOTE
background-size: 75;

The value needs a unit.

QUOTE
background-repeat: no-repeat-y;

Incorrect value.

Here's an index of CSS3 properties with links to the W3C spec (where you can find correct values etc): http://meiert.com/en/indices/css-properties/

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Lensmeister
post Sep 27 2013, 01:38 AM
Post #9


Newbie
*

Group: Members
Posts: 17
Joined: 21-November 12
Member No.: 18,131



Thanks Christian, I have been fiddleing with it on the train home last night I I found a changed a few things and now it is working.

Thanks to everyone for the assistance.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 3rd August 2020 - 10:31 PM