Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2

Thread: Need some help

  1. #1
    Junior Member
    Join Date
    Mar 2014
    Posts
    1
    Member #
    38720

    Need some help

    Hello and thank you for looking at my post...

    I am in need of some help. I built a website on Joomla 1.5 for a friend of mine who owns a pizza shop. Joomla is now at version 3.0 and the old template cannot be converted over. Long story short I have to a complete redesign of the site and learn Joomla 3.0 and make a new template altogether. However I have some questions

    This is how I would like it to look as this here
    http://oneitplace.com/dev/images/pizzaexample.png

    the checker pattern should extend down the screen with the white area in the center being joomla's content area can vary in length depending on content from 1000 pixels in length to over 4,000 pixels in length so the page needs to stretch somehow

    here are my issues

    1. How do I get the checkboard pattern to stretch down the page without stretching the wood table area ? I want to maintain the same look at the top and then just have the checkerboard continue. would I load two background images using CSS ? having the wood have a transparency to accommodate the tablecloth (checkerboard) and then make the actual checkerboard pattern the entire background pattern stretched ?

    example

    Code:
    #example1 {
     width: 1600px;
     height: 900px;
     background-image: url(wood.png), url(checkerboard.png);
     background-position: ???
     background-repeat: no-repeat;
     }

    2. can I stretch the background checkboard dynamically if I am also using like the example above from a 320px x 360px image ?

    3. How can I accomplish this and keep the load time extremely low as half of the visitors are on mobile platforms ?


    Thanks in advance for any help.

  2.  

  3. #2
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,139
    Member #
    27197
    Liked
    959 times
    1. Layer a div on top of the wood background and use css transform to skew it: https://developer.mozilla.org/en-US/.../CSS/transform
    Put the pizza in another div of its own (or use pseudo-elements).
    2. You can but using what I said in the first point, you wouldn't have to.
    3. Use the smallest size image pattern you can get away with. Ditch the pizza on mobile using media queries.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:54 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com