Assets in css dont link properly in pages other than home

Question

Hello I have a small issue regarding my linking in my style.css

For example:

@font-face {
    src: url('wp-content/themes/mytheme/fonts/font.ttf');
}

and

.div {
    background: url('wp-content/themes/mytheme/images/img.png');
}

My home page works perfectly, assets link correctly but when I go to another page such as "about" the links are broken because it does this:

www.url.com/about/wp-content/themes/mytheme/images/img.png

Anyone know why this is happening?

Thanks

Answer 1

You're using relative URLs that will always look inside the current URL structure. You either need to add a slash before wp-content, or put in the full URL to the resources.

So for example: src: url('/wp-content/themes/mytheme/fonts/font.ttf');

or src: url('http://example.com/wp-content/themes/mytheme/fonts/font.ttf');

Answer 2

For the following structure:

/wp-content/
    /themes/
        /mytheme/
            style.css
            /images/
                img.png
            /font/
                font.tff 

reference img.png and font.tff like so:

.div {
    background-image: url('images/img.png');
}

@font-face {
    src: url('fonts/font.ttf');
}

For when css files are in a directory:

/wp-content/
    /themes/
        /mytheme/
            /css/
               some.css
            /images/
                img.png
            /font/
                font.tff 

In some.css you would reference them like so:

.div {
    background-image: url('../images/img.png');
}