Title: using image in stylesheet
Last modified: August 22, 2016

---

# using image in stylesheet

 *  [tahoom](https://wordpress.org/support/users/tahoom/)
 * (@tahoom)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/using-image-in-stylesheet/)
 * In my theme there is a code for blog posts slider, in a part of that is this 
   code for thumbnail images that show in this slider:
 * img {
    position: relative; z-index: 2; display: block; width: 200px; height: 
   auto; [@include](https://wordpress.org/support/users/include/) float(left); //
   float: left; [@include](https://wordpress.org/support/users/include/) margin-
   right(20px); // margin-right: 20px; [@include](https://wordpress.org/support/users/include/)
   margin-left(-20px); // margin-left: -20px; }
 * the problem is where it calls a 200px image in width but I wanna call the image
   that defined in functions.php with the name “horizontal-4”. how can I call that?

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Andrew Nevins](https://wordpress.org/support/users/anevins/)
 * (@anevins)
 * WCLDN 2018 Contributor | Volunteer support
 * [11 years, 2 months ago](https://wordpress.org/support/topic/using-image-in-stylesheet/#post-5953993)
 * Don’t the images come through in the HTML? I’m not sure what you mean by pointing
   to the 200px width CSS style.
 *  Thread Starter [tahoom](https://wordpress.org/support/users/tahoom/)
 * (@tahoom)
 * [11 years, 2 months ago](https://wordpress.org/support/topic/using-image-in-stylesheet/#post-5954135)
 * thanks [@andrew](https://wordpress.org/support/users/andrew/)
    The theme has 
   a slider for posts of the blog, the only place I can find the codes for this 
   slider is in style.css and all of the codes for this slider is:
 *     ```
       &.mpc-vc-blog-posts-slider {
       			.mpcth-slide-wrap {
       				float: left; // non-RTL
       			}
       			.mpcth-slide {
       				position: relative;
       				display: block;
       				overflow: hidden;
       				padding-right: 20px;
       				padding-left: 20px;
       				height: 152px;
       				float: none;
       				max-width: none;
   
       				&.mpcth-slide-row-gap {
       					margin-bottom: 1.5em;
       				}
   
       				img {
       					position: relative;
       					z-index: 2;
       					display: block;
       					width: 200px;
       					height: auto;
       					@include float(left); // float: left;
       					@include margin-right(20px); // margin-right: 20px;
       					@include margin-left(-20px); // margin-left: -20px;
       				}
   
       				.mpcth-slide-title {
       					text-transform: uppercase;
       					margin: 1em 0 .25em;
       				}
       				.mpcth-slide-time {
       					text-transform: uppercase;
       					color: #666666;
       					font-size: .923em;
       				}
       				.mpcth-slide-text {
       					color: #666666;
       					text-align: justify;
       					line-height: 1.5em;
       				}
       				.mpcth-slide-trim {
       					position: absolute;
       					bottom: 0;
       					left: 0; // non-RTL
       					background: linear-gradient(to bottom, rgba(255,255,255, 0) 0%, rgba(255,255,255, 1) 90%);
       					background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(255,255,255, 0)), to(rgba(255,255,255, 1)));
       					background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
       					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
       					-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
       					width: 100%;
       					height: 2em;
       					z-index: 1;
       				}
   
       				@media #{$screen-large} {
       					.mpcth-responsive & {
       						height: 173px;
   
       						img {
       							width: 260px;
       						}
       					}
       				}
       				@media only screen and (max-width: 640px) {
       					.mpcth-responsive & {
       						height: auto;
       						padding-left: 0;
       						padding-right: 0;
   
       						img {
       							float: none;
       							width: 100%;
       							margin: 0 0 1em 0;
       						}
   
       						.mpcth-slide-wrapper {
       							padding-left: 20px;
       							padding-right: 20px;
       						}
       					}
       				}
       			}
       		}
       ```
   
 * and the codes for the image I think is the codes in my previous post. This code
   calls a image with 200px width auto height but actually it loads a 600×450 image
   wich defined in functions.php as “horizontal-2” and in GTMETRIX my website has
   a “Serve scaled images” problem wich loads more than 150KB for this difference
   in image loading. Can I call the predefined “hoizontal-4” image in functions.
   php instead of the image style.css calls as 200px width?
    a code like: <?php 
   the_post_thumbnail( $size, $attr ); ?> in php files.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘using image in stylesheet’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [thumbnail](https://wordpress.org/support/topic-tag/thumbnail/)

 * 2 replies
 * 2 participants
 * Last reply from: [tahoom](https://wordpress.org/support/users/tahoom/)
 * Last activity: [11 years, 2 months ago](https://wordpress.org/support/topic/using-image-in-stylesheet/#post-5954135)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics