Adding imagines to styles.css in the child theme

Question

I've tried to customize the CSS in the styles.css of the child theme. I coded for the header and i need to add the image in the background-image of the CSS file. However, I have not been successful and am so annoyed by that. I googled and tried several methods but all did not work. Any suggestions for me?

Thanks so much!

.custom-shape-divider-bottom-1610186053 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
/* The image used */
background-image: url("wp-content/uploads/2021/02/Header-scaled-e1614077554372.jpg");

/* Full height */
height: 100%;

/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
min-height: 100vh;

}

I think you need add display:block, and add a with (not 100%, maybe parent layer is 1px) in an absolute layer if is empty inside, I will need to see the site to help you the code you shoe us is not enough — marcos.efrem, Mar 02 '21 at 23:36

rompikapo · Answer 1 · 2021-03-03T17:32:27.950

There is a bit of confusion, you have first absolute and then relative, different min-height and height, height:100% works if the parent box has a determined height, however theoretically here it is useless, because min-height is higher. Anyway, we should see it on the website to understand what doesn't work, without the context it can work or not, hard to say, do you have a link to post?

UPDATE

Hi, thank you for the link, I try to explain

Your page has an in-line style which overrides the rule of your external style sheet, the in-line style is stronger than the linked style sheet, to reinforce your style I added the div tag (div.custom-shape -divider-bottom-1610186053)

I guess you've heard of it, if you want to learn more you can find a lot of documentation that explains the precedence in the overwriting of css, here a link on stackoverflow where it is summarized: What is the order of precedence for CSS?

Furthermore, the first slash (/wp-content/...) was missing from the url.

Below the rewritten rule:

div.custom-shape-divider-bottom-1610186053 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
    background-image: url("/wp-content/uploads/2021/02/Header-scaled-e1614077554372.jpg");
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    min-height: 100vh;
}

Let me know

you are right. I actually did not notice that the codes are quite messy (I started learning CSS and HTML a few months ago and i think i still have long way to go ^^). So you can see for the background-image I have a path to the image and it does not work. Here is the web https://koraby.com/. I just started so it also looks little messy. Really appreciate any help! Thanks! — Lien Dinh, Mar 03 '21 at 08:27
Hi @rompikapo, thanks for your answer. Unfortunately it did not work ^^. Do you have other ideas where the problem could be? — Lien Dinh, Mar 05 '21 at 10:43
Hi Lien, I'm seeing it now on your page, the image is loaded, you probably just need to refresh the browser cache, please try to clear the browsing data, or to load the website with another browser, Let me know if you see it — rompikapo, Mar 05 '21 at 22:12
Sorry that I did not see your message. It did work well. Thanks so much for your help! — Lien Dinh, Apr 03 '21 at 01:25

Adding imagines to styles.css in the child theme

1 Answers1