Hello,
I've been really struggling to find an answer to this on the internet as everyone is always vague in their reply. I want to use this CSS code below. I have made a child theme and now I just want to make my background image AND text resizeable in the browser. Can someone please just walk me through how I would use the code below to accomplish this? I tried putting this in my CSS customizer and pasting the URL into the part of the code below that says url(images/bg.jpg), but it's just not working. Please help a dude out. My website is almost done, just not mobile compatible. I honestly just need a straight forward explanation if possible. (www.proph3cy.com is the site)

Zach

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Not sure why you're applying this to html rather than body - https://css-tricks.com/html-vs-body-in-css/

body {
 your styles;
}

As for responsive text, there's several ways to achieve this.

Is something like this what you are trying to accomplish? http://jsfiddle.net/Lntp56d0/

Like in Eddie's example you can use vw (https://css-tricks.com/viewport-sized-typography/) for the font size or you could use rem/em (https://css-tricks.com/confused-rem-em/) and this is a link to help with the background-size attribute (https://css-tricks.com/almanac/properties/b/background-size/) in Eddie's example he hasn't used cover so you may want to look at possibly changing the 'cover' to something else

^^Rems and Em's are relative units to font-size. As in EM is relative to it's parent's font size, REM is relative to the root font size. They are very different to the viewport units. But all are useful depending upon the situation.

 

Just thought I'd point out that difference unless anybody is confused. Also to the OP look into using Autoprefixer, there's no need to be writing all those vendor prefixes now when they can be generated - I'm pretty sure all modern browsers support it unpredixed also, but with Autoprefixer using the caniuse database, it is always upto date so you don't even need to think about it.

Guys I just am really not experienced and all of this isn't working. I've tried so many different types of code in my custom CSS in wordpress and no matter what it always warps in some way. I just want my background image and text to look exactly the same on any platform.

 

These are the problems I'm having (i took pictures from my website www.proph3cy.com). Its on the pages titled "social media" and "whose proph3cy".On the first image, the background repeats again and on the second image the words get pushed to the left and the whole background image gets cut off and repeats as well.

 

https://www.dropbox.com/s/exogurkdt5y7bgq/Screen%20Shot%202015-10-11%20at%207.30.38%20AM.png?dl=0

 

https://www.dropbox.com/s/4kqntpsavjc587k/Screen%20Shot%202015-10-11%20at%207.30.53%20AM.png?dl=0

 

If you go to my website it will put these problems in context of what is happening when I switch to mobile devices.

 

I am honestly desperate for help on this and have been working for days trying to figure it out. If someone wants to look at my code I can send it over to you.

 

Thanks.

Zach

Edited October 11, 201510 yr by proph3cy

use codepen.io and paste in your code there, that will make it far easier to look at and assess your code

 

I know this might not help your current issue, but if you're planning to do much in the way of web development I highly recommend you go and learn the basic principles of HTML CSS using a resource like Treehouse or CodeSchool. Otherwise you'll be in for a whole world of frustration. Once you learn how all the pieces of the puzzle fit together then you'll have great fun creating web interfaces

 

In the meantime stick your HTML and CSS up in codepen and we can take a look.

Edited October 11, 201510 yr by rbrtsmith

Ok, so I took a look and have a better understanding of what you mean. Remove your current stylings for the about section's background, and put this:

background-image: url('http://www.proph3cy.com/wp-content/uploads/2015/10/touchup11-e1444247050569.png');
background-size: 100%;

As for the text on the left, that's because you've wrapped it in a container, col-md-6 / col-lg-6 are exactly half width. If you make them col-md-12 or col-lg-12 they are full width, the text will spread out.

 

Edit:

Screenshot applying background size: http://imgur.com/to4ACiZ

Screenshot changing column width in addition to background size: http://imgur.com/1ACYsZZ

 

Hopefully I haven't misunderstood the request.

 

As Robert said earlier, the easiest way we can help you is to put the code you are having trouble with on codepen or jsfiddle, we then get a better idea of the request and can make edits.

Edited October 11, 201510 yr by EddieT

Ok thanks for this!