CSS Help!

[lakaroth]

Hi guys, who can help me with a simple modify in CSS?
I'm using "Aryze" template, and i want do a simple modify:

The original image BLOCK is like this:
938px
400px



I want do a big image horizontally larger all over the screen like this:



Now... in Style.css there's this:

Code:

/*******************************MEDIA*********************************/

#mediaBlock
{
    float: left;
    background-image: url(../design-Props/mB-bg.png);
    background-repeat:no-repeat;
    width: 938px;
    height: 400px;
    margin: 5px 0px 10px 10px;
  border: 1px #fff solid;
  background-color: #fff;
    padding: 0px 0px 0px 0px;
}

#mediaBlock h1
{
  text-indent: -9999px;    
}

.mediaBlock
{
    width: auto;
    height: auto;
    padding: 0px;
    margin: 0px;
    border:;
}

/*-------------------------------------------------------------*/

I'v tryied to modify without success, how can i do it?
Best Regards

[shawn_a]

just change the width?

[lakaroth]

just change the width?

Is the first thing that i try... but changing width, the image is not centered on the screen...

[Timbow]

The Ultimate CSS Reference Copyright © 2008 SitePoint Pty Ltd

By default, the background-image is placed at the top-left (background-position) of the element; it’s repeated along the x and y axes (background-repeat) and will scroll with the document. These are the default settings that apply if you haven’t explicitly set any others, and can be adjusted with the other background properties.

So you need
background-position: center top; /* same as 50% 0% */
to center the background image.

I don't think you can stretch a background image to make it 100% width, it is what width it is and displays pixel for pixel I think.

[Timbow]

May be published 2008 but still a really good reference, online and free here
http://www.ebooktrove.com/coding/cssref1pdf.pdf
and I think you can save it to your disk too.

[shawn_a]

You can remove the float left and negative margin it.

But it is in the flow of the page, you could always absolutely position it.

[lakaroth]

Thank you Timbow that PDF it's really useful for me... i'm sure i need to study a lot because i dont understand a lot of what you say guys.
I dont want to stretch the image, just to use an image more larger than that something like 1280 X 400 or more...

shawn_a i understend... remove the float left is ok, but wich is the negative margin?
you mean : margin: 5px 0px 10px 10px; ?

I'll do that but the box i still not centered in the screen

[lakaroth]

SOLVED:
The problem was not only in CSS but in the template.php, the BLOCK was in the "content DIV, instead the frame DIV" so, it was centered with contents not with the frame.

Anyway i also have another problem
The IN18 gallery doesen't work, pretty photos or other thing non work...
if a make a gallery and click it, the photos will be open in te same browser window.

I try to call
<script src="<?php get_theme_url(); ?>/js/jquery-1.7.1.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/jquery.prettyPhoto.js"></script>
<script src="<?php get_theme_url(); ?>/js/jquery.cycle.all.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="<?php get_theme_url(); ?>/js/supersized.3.2.6.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/s3Slider.js"></script>
<script src="<?php get_theme_url(); ?>/js/jquery.autogrow.js"></script>
<script src="<?php get_theme_url(); ?>/js/jquery.easing.min.js"></script>
<script src="<?php get_theme_url(); ?>/js/jquery.mousewheel-3.0.4.pack.js"></script>
<script src="<?php get_theme_url(); ?>/js/s3Slider.js"></script>
<script src="<?php get_theme_url(); ?>/js/supersized.shutter.min.js"></script>

In the templates, but still dont work...