Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Trevis Kelley
Trevis Kelley
Courses Plus Student 3,777 Points

background-size either 100% or zero

I am working within Wordpress with a plugin called Participants Database, which allows member sign-ups and generates a form from fields I input. I am attempting to style my form, but the background-size property seems to be having a weird issue. If I input 1% as the size, it displays as 100%. If I enter 0%, then it disappears altogether. In Wordpress, I put a custom HTML widget into my theme and then add short code based on documentation from Participants Database. What you see in Codepen is the div created by the widget, and then what the shortcode generates in the HTML (as viewed by page source). The CSS is entered into the Custom CSS section of Participants Database. It seems to work to change button colors, add the linear-gradient, etc. Just the background-size is giving me fits. Here is the link to the Codepen:

https://codepen.io/anon/pen/BYxNbd

I realize that there are a lot of variables there, but I think I need a sanity check to ensure that I'm not crazy.

Thank you so much!

1 Answer

Steven Parker
Steven Parker
242,796 Points
Steven Parker
Steven Parker
242,796 Points

I notice you have two comma-separated sizes, but only one background. Did you mean to specify two dimensions instead?

Also, since the "gradient" is actually a uniform color, it conceals the repetition that is occurring. But you can turn that off.

So if you wanted to constrain the size to 1% horizontally, but cover 100% vertically, you could do this:

    background-size: 1% 100%;
    background-repeat: no-repeat;
Trevis Kelley
Trevis Kelley
Courses Plus Student 3,777 Points

So, I think the no-repeat was the issue. It seems to change based on what I put in for the percentages now. I think the comma ended up between the two percentages after about a hundred rounds of removing and adding back in. I never once thought the repeat function would make it look like it's 100%, but now that I think about it, it makes sense. Thank you so much for the help!