Adding an image that fits width of homepage - Brooklyn Theme

Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi again Tyshel,

For the images on your homepage, you would first need to wrap them in containing divs. When you do this, it is very important that you set them to the same height as the image it contains, otherwise the background will bleed through. Here is an example for your Yoshi image:

<div class="background" id="yoshi">
<img alt="" src="//cdn.shopify.com/s/files/1/1270/5603/files/Yoshi_Insp_Ent_Logo_medium.jpg?16318838900236262793" style="float: none;transition: all 1s ease;width: 100%;">
</div>

From here, I set the height of the div using its ID (each DIV should have a unique ID so that you can set the heights individually) and add the transformation property to the class:

.background {
background-color: red;
transition: all 1s ease;
}

.background img {
transform: scale(0.9);
}

#yoshi {
height:133.63px;
}

If you add that to the bottom of your CSS file (along with different heights for the different div IDs) then you should have functionality like this: https://screenshot.click/20-59-8guvc_1c6oh.mp4

-Britton

Britton Shopify Guru
0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

I have one product setup.  https://thestylistsuite.myshopify.com/

I used the Copy of Brooklyn for editting.  

 

thanks

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

 

So if I want this to appear throughout my site, including each individual image, how would I amend this code?

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

YES! this is what I'm looking for.  I will implement your suggestions! Thanks for getting back to me so quickly, too! I appreciate it! whoo hooo

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

Unfortunately this function isn't working out on my homepage and I copied and pasted the code. hmmm.  Please tell mewhat I am doing wrong. The red box is there but it isn't hidden underneath or interactive

Thanks

Also ( for the sake of confirmation)  please let me know if all of these codes belong at the bottom of my style file.  Thanks.

I would like to use the wrapper on my Homepage, Collection page and any other pages I Add.

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

If you would leave the example Yoshi, I will appreciate it.  I've tried retesting the code but having no luck

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

Also, just to add  FYI, Timber.scss.liquid and Theme.scss.liquid both are working to receive the code.  so you are correct.  When editing the style files for this theme I have been needing to use either or at times.

0 Likes
Britton_Jenner
Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi Tyshel,

The code I mentioned above needs to be implemented both on the actual page under online store > pages in your admin and on the theme.scss.liquid file. You will need to put the page into html view mode and add a div wrapping the img tags for each image on that page. Those divs need to all have the class "background" and an ID particular to the image, like "yoshi" in my example above. 

Once you have that set up the CSS I posted should do the rest of the magic for you. Getting this to work with every other image on your site could be done by making sure that the image tags are all wrapped in divs with a class of "background". There may be some issue that come up due to the original functionality given to them by the theme, but it should be possible to iron that out.

-Britton

Britton Shopify Guru
0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

Hi Britton,

Thanks for getting back, I appreciate it. I was sure I did it in that manner but will give it another go. Thanks for explaining how to do the rest of my site as well.  This is an awesome feature that we want on our site.

 

Thanks again.

0 Likes
Tyshel_Lockamy1
Shopify Partner
21 0 2

I implemented the code as is but it's bleeding through.  Could you please advise why? and it doesn't have that hover/ float effect.

Thank you so much.

0 Likes