CODEWITHSUNDEEP
wordpresswordpress-theming
Chris
Chris

Reputation: 2181

WordPress using images in sage template

I am trying to use a background image in one of my Sage template files.

However when I try this the image is not being displayed.

<section class="banner" style="background-image: url(../images/banner.jpg);">

The banner.jpg file is located in theme-name/assets/images/banner.jpg

What am I doing wrong here?

Upvotes: 1

Views: 3331

Answers (5)

eheisler
eheisler

Reputation: 124

The previous answers use some of WordPress' built-in functions for resolving a path to the current theme. However, in Sage (using Blade templates) this is handled with the @asset directive:

<section class="banner" style="background-image: url("@asset('images/example.jpg')");">

Documentation

Upvotes: 1

arslan
arslan

Reputation: 408

Try this in your header.php:

<section class="banner" style="background-image: url(wp-content/themes/theme-name/dist/images/about-us-top-side.png);">

or

<section class="banner" style="background-image: url(wp-content/themes/theme-name/assets/images/about-us-top-side.png);">

The first one will have the optimized image if you are using the Sage theme properly.

Upvotes: 0

Ankur Bhadania
Ankur Bhadania

Reputation: 4148

Replace your code with below code. You need to add assets before image folder because as per your image path you mention images folder is sub folder of assets 

<section class="banner" style="background-image: url('../assets/images/banner.jpg');">

Used get_template_directory_uri(). It Retrieve theme directory URI.

<section class="banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/banner.jpg');">

Used get_stylesheet_directory_uri() if you used child theme .It return URI for the current theme/child theme

<section class="banner" style="background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/banner.jpg');">

Upvotes: 1

dimabagow
dimabagow

Reputation: 25

Try this: 

<section class="banner" style="background-image: url(/wp-content/themes/theme-name/assets/banner.jpg);">

or this:

<section class="banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/banner.jpg');">

or maybe you just forgot "assets":

<section class="banner" style="background-image: url('../assets/images/banner.jpg');">

Upvotes: 0

Somin
Somin

Reputation: 61

Please use wordpress template directory path

<section class="banner" style="background-image: url(<?php echo get_template_directory(); ?>/images/banner.jpg);">

Upvotes: 0

Related Questions