css - I am using a carousel to show images but cant fix image to cover background using an unordered list -

-

I have been able to create a carousel for images using html5, css3 and jquery. Unfortunately I can not fully understand the simple task of getting the images to fill the background. They are all different shapes on the rotation. I have changed it so much that I got a mess, can anybody help?

CSS 

  .wrapper {position: fixed; Width: 100%; Height: 100%; Top: 0 pixels; Left: 0 pixels; Z-index: 0; Padding-top: 0 pixels; } .slider {Overflow: hidden; } .slider li {margin: 0 auto; List style: none; Width: 100%; Height: 100%; Status: Completed; Top: 0 pixels; Left: 0 pixels; Background size: cover; Background-position: 50% 50%; Background-Repeat: None; }

HTML 

  & lt ;! DOCTYPE html & gt; & Lt; Html class = "no-js" & gt; & Lt; Top & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Meta http-equiv = "X-UA-compatible" content = "IE = edge, chrome = 1" & gt; & Lt; Title & gt; Gallery & lt; / Title & gt; & Lt; Meta name = "description" content = "" & gt; & Lt; Meta name = "viewport" content = "width = device-width" & gt; & Lt; Link rel = "stylesheet" href = "css / main.css" & gt; & Lt; Script src = "js / modernizr-2.6.2.min.js" & gt; & Lt; / Script & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = "wrapper" & gt; & Lt; Ul class = "slider" & gt; & Lt; Li & gt; & Lt; Img src = "after_front.jpg" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; IMG src = "after_scenicView.jpg" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = "after_lib.jpg" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = "after_mac.jpg" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = "after_gym.jpg" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; IMG src = "after_lounge.jpg" /> & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> & Lt; Script & gt; Window.jquire || Document.write ('& lt; script src = "js / jquery-1.9.1.min.js" & gt; & lt; / script & gt;') & lt; / Script & gt; & Lt; Script src = "js / main.js" & gt; & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;

Any advice would be appreciated! Thanks full novice here.

The problem may be two things are first that your li The .slider field is not full of the list. You can add height: 100% and width: 100% to the item in the list whether it fixes the problem or not. The other problem may be that your browser does not support the background-size: cover . If this is the case, you can try proprietary browser tags for it: 

  .slider li {-webkit-background-size: cover; -MOZ-BACKGROUND-SHAPE: COVER; -o-background-shape: cover; Background size: cover; Background-shaped: 100% 100%; Filters: Cognized: DXimage Transform. Microsoft.alpha imagedloader (src = 'image / path / name page', sizing method = 'scale'); }

If that does not fix the problem, you can always go the path of inserting images into HTML as DOM elements. Then you can write your CSS to say 'width: 100%' and they will always fill the original width. This leads to some issues with focusing the image, but this work will be done!

Depending on your HTML update

The problem is that the property background-size: cover only if you Background image: defines an image using url (../ path / to / file.jpg) . Since images contain DOM elements, they are not considered to be backgrounds, but they only block elements of the level. You can either rewrite your CSS to handle HTML images, or you can change it in your HTML: 

  & lt; Ul class = "slider" & gt; & Lt; Li style = "background-image: url ('after_front.jpg');" & Gt; & Lt; / Li & gt; & Lt; Li style = "background-image: url ('after_scenicView.jpg');" & Gt; & Lt; / Li & gt; & Lt; Li style = "background-image: url ('after_lib.jpg');" & Gt; & Lt; / Li & gt; & Lt; Li style = "background-image: url ('after_mac.jpg');" & Gt; & Lt; / Li & gt; & Lt; Li style = "background-image: url ('after_gym.jpg');" & Gt; & Lt; / Li & gt; & Lt; Li style = "background-image: url ('after_lounge.jpg');" & Gt; & Lt; / Li & gt; & Lt; / Ul & gt;

The paths of your images may not be accurate, so you should check to ensure that you are not getting 404 errors on them. Apart from that, because they are no longer the DOM element, you have to define a height in your CSS.


Comments

Post a Comment

Popular posts from this blog

import - Python ImportError: No module named wmi -

-
I followed the instructions for downloading WMI for Python When I try to run the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = wmi.WMI (): if Raw_input ("restart% s?"% S.Caption) .upper () == "Y": s.StartService () I got the error < Code> traceback (most recent call end): file ". \", Line 1, edit: I am using Python 2.7.6 EDIT2: I am running 64-bit Windows 2008 R2, and I've downloaded WMI-1.4.9.zip (md5). I removed the content and put it in D: Python \ Tools \ Scripts I executed dragon setup.py.install I said D : \ Python \ tools \ scripts to% PATH% and when I execute the code for C.Win32_Service (StartMode = "Auto", state = "Stopped") import wmi c = Wmi.WMI (): If raw_input ("Restart% s?"% S. Caption). () == "Y": s.StartService () error me Gets traceback (most recent call final): File ". See \", line 1, &
Read more

Editing Python Class in Shell and SQLAlchemy -

-
I am working on the terminal on a shell script after this tutorial SQLAlchemy tutorial. I need to type gt; & Gt; & Gt; Sqlalchemy import column, integer, string & gt; & Gt; & Gt; Class user (base): __tablename__ = 'users' id = column (integer, primary_key = true) name = column (string) absolute name = column (string) password = column (string) def __repr __ (self): return "& lt ; User (name = '% s', absolute name = '% s', password = '% s') & gt; "% (Self.name, self.fullname, self.password) After the problem I have typed the password = column (string) I hit twice and changed .... >> I then took everything back but then an error was thrown because the class already exists ... I am not completely sure how to fix it. How do I open that slip in the shell script and edit it (Add DF to DRR) The error thrown below: / user / giripeters / TFSQLLX / Lib / python2.7 / site-packages / sqlalchemy / ext / decla
Read more

c# - MySQL Parameterized Select Query joining tables issue -

-
I am using parameterized select questions in conjunction with my program and it works entirely, When I try to join the table Everything I have done is a small fraction: using (MySqlCommand cmd = new MySqlCommand (paramQuery) ToSql (), Connection)) /etc/ paramQuery.ToSql () Equal: "Select TableOne ID, Tableon, Department, Tablet. One by name table, Table 2 h Yes TableOnEID = @Pharmak "* / for (Int Index = 0; Index and Lt; ParamariX Parameter (.c calculation; Index ++) Cmd.Parameters.AddWithValue (paramQuery.Parameters (). ElementAt (index). , ParamQuery.Parameters (). ElementAt (index) .Value); / * ParamQuery.Parameters (). ElementAt (index) .k = "@most 0" paramQuery.Parameters (). ElementAt (index) .Value = "tableTwo.ID" * / MySqlDataReader Reader = cmd.ExecuteReader (); While (reader.Read ()) {// do stuff} } One of the tables I attempt to join is For the table, two with the same id for all. Is there something that I'm doing wrong?
Read more