Right Align of images with Category causes them to skew and go out of proportion

[moizizzy]

Hi,

Really need help please. I want to right align my category images on its respective page and have the category description  aligned next to it to its left without overlapping.

 

I did the following:

 

1. Changed the code within category.css in my template css folder

  .content_scene_cat .content_scene_cat_bg {

    padding: 18px 10px 10px 42px;

    background-color: #464646 !important;

    background-position: right !important; } 

 

(red highlights change)

 

2. I then changed the size of images in Preferences > Images > Category_default to 217 x 217 Screemshot ()

 

But now the result looks like this http://azeeztrading.com/index.php?id_category=3&controller=category

screenshot()

[razaro]

Hi 

 

Welcome to the forum first. And for your image issue check category.tpl.

You will see there that category image is there as inline style and background image.

Notice of /cover that is stretches image on whole container.

 

You can edit that and make maybe 2 columns, one on left bigger to have text and other

with img element to hold category image, not as background. 

[moy2010]

x2. The category image has an inline style overriding the changes you've been doing with CSS:
 

<div class="content_scene_cat_bg" style="min-height: 870px; background: url(http://azeeztrading.com/img/c/3-category_default.jpg) 100% 50% / cover no-repeat;">

                                                    <div class="cat_desc">

 

Once you've removed that, edit the CSS code like this:

 

.content_scene_cat .content_scene_cat_bg {

    padding: 18px 10px 10px 42px;

    background: url(http://azeeztrading.com/img/c/3-category_default.jpg) right top no-repeat;

    }

 

It'll look like this:

 

After that, all you'll have to do is give some padding to the right to the text of the category description .

Edited May 17, 2015 by moy2010 (see edit history)

[moizizzy]

Hi,

Here is the code from my Category.tpl please can you help me amend

 

<div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; background-size:cover; min-height:{$categorySize.height}px;"{/if}>

 

Will i need to regenerate thumbnail after changin this?

 

I tried changing it to 

 

                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right center no-repeat; "{/if}>

 

 

but no benefit.

Edited May 17, 2015 by moizizzy (see edit history)

[moizizzy]

I even tried the following now. I edited the CSS to

 

.content_scene_cat .content_scene_cat_bg {

    padding: 18px 10px 10px 42px;

    background-color: #464646 !important;

    background-position: right top no-repeat; !important; }

 

 

I modified category.tpl to

 

                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) right top no-repeat;"{/if}>

 

I regenerated THumbNail and the result is still the same :(

http://azeeztrading.com/index.php?id_category=3&controller=category

[razaro]

You can not have no-repeat in background-position property, if you want that separate use background-repeat.

 

But try this, background-size is main here

.content_scene_cat .content_scene_cat_bg {
  padding: 18px 10px 10px 42px;
  background-color: #fff !important;
  background-size: inherit !important;
  min-height: 400px !important;
}

And adjust min-height, and also change heading color

.content_scene_cat span.category-name {
  font: 600 42px/51px "Open Sans", sans-serif;
  color: #444;
  margin-bottom: 12px;
}

Or adjust colors to you style.

[moizizzy]

You can not have no-repeat in background-position property, if you want that separate use background-repeat.

 

But try this, background-size is main here

.content_scene_cat .content_scene_cat_bg {
  padding: 18px 10px 10px 42px;
  background-color: #fff !important;
  background-size: inherit !important;
  min-height: 400px !important;
}

And adjust min-height, and also change heading color

.content_scene_cat span.category-name {
  font: 600 42px/51px "Open Sans", sans-serif;
  color: #444;
  margin-bottom: 12px;
}

Or adjust colors to you style.

 

 

 

 

Hi @SPAM Mod that solved the problem. Thank You

Edited May 17, 2015 by moizizzy (see edit history)