Backgrounds and linked text - Page 2...

Feb 7th, 2015 at 12:38 PM
User 434929 Photo

Mansour ...
Ambassador
938 posts

Tutorial: Adding and linking custom CSS into RLMP
https://www.youtube.com/watch?v=ShZVJVfkcxg

And most common way to add background image into CSS.

background: url('../images/test.png') rgb(143, 143, 143);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
Guys at coffeecup are awesometacular.
Feb 7th, 2015 at 12:41 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Byron Tipping wrote:
Adam

IT worked but only the top small small of the pic, and I didn't slice the photo. I did put a no repeat in the background as it was tiling.

How do I make the whole picture show


You have to add a min-height to the column. The min-height should match that of your image so the full image shows. :)
Feb 7th, 2015 at 12:41 PM
User 458539 Photo

Byron Tipping
Registered User
1,625 posts

I tried making the column min height 500 px and the picture shows up - but I have destroyed the responsive width and I haven't placed copy below but but I have messed that up also

Feb 7th, 2015 at 12:53 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Byron Tipping wrote:
I tried making the column min height 500 px and the picture shows up - but I have destroyed the responsive width and I haven't placed copy below but but I have messed that up also



Now you need to follow the instructions that Mansour gave you. That will make the background image responsive and cover the entire column.
Feb 7th, 2015 at 12:57 PM
User 458539 Photo

Byron Tipping
Registered User
1,625 posts

Wow your memory is better than mine!!!! When I searched I didn't find it but will continue to do

Byron
Feb 7th, 2015 at 01:07 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Byron Tipping wrote:
Wow your memory is better than mine!!!! When I searched I didn't find it but will continue to do

Byron


He posted a comment below, what do you mean? :lol:
Feb 7th, 2015 at 01:39 PM
User 458539 Photo

Byron Tipping
Registered User
1,625 posts

Oops! it was up the page and I must have not seen it - sorry to have a stupid moment

Thanks guys - will look into this

Byron
Feb 7th, 2015 at 01:45 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Byron Tipping wrote:
Oops! it was up the page and I must have not seen it - sorry to have a stupid moment

Thanks guys - will look into this

Byron


You are fine! It is hard sometimes having to switch between so many different windows! Let us know when you get it completed.
Feb 7th, 2015 at 01:56 PM
User 458539 Photo

Byron Tipping
Registered User
1,625 posts

Guys - I'm close

Redid a couple of times but I can't seem to see what I did wrong - the picture is not responsive.

this is what I put for custom css

.column-1 {
background: url('../images/test.png') rgb(143, 143, 143);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

}

I did add this to the main.css

body > .row > [class*='coffee-span-'].column-1 {
margin-right: auto;
margin-left: auto;
min-height: 750px;
background-color:transparent;

added the transparent

Thanks in advance

Byron
Feb 7th, 2015 at 02:10 PM
User 2484360 Photo

Adam East
Registered User
3,293 posts

Byron Tipping wrote:
Guys - I'm close

Redid a couple of times but I can't seem to see what I did wrong - the picture is not responsive.

this is what I put for custom css

.column-1 {
background: url('../images/test.png') rgb(143, 143, 143);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

}

I did add this to the main.css

body > .row > [class*='coffee-span-'].column-1 {
margin-right: auto;
margin-left: auto;
min-height: 750px;
background-color:transparent;

added the transparent

Thanks in advance

Byron


Ah, you have the wrong code. Change the background-size:cover; to background-size:contain; as shown below.

.column-1 {
background: url('../images/test.png') rgb(143, 143, 143);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}


Just note those linked text will move as the image gets smaller.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.