2012-12-19 40 views
7

Tôi dường như không thể làm cho plaid của tôi là nền tảng trên bất kỳ trang nào của tôi, hãy để một mình tất cả chúng, tôi đã thử chọn nó theo phần thân, html, *, id cụ thể của "home" . không có gì hiệu quả. Hình ảnh có kích thước 300 x 421 pixel. Tôi không cần nó để hiển thị khá, tôi chỉ muốn nó hiển thị, đằng sau tất cả mọi thứ. css của tôi sẽ tìm kiếm điều này như thế nào? hình ảnh plaid.jpg nằm trong thư mục hình ảnh của tôi trong cùng thư mục với tệp index.html của tôi. Liên kết này nằm ở đầu tệp index.html của tôi. và biểu định kiểu của tôi nằm trong thư mục stylesheets có tên mystyles.css.background-image: url ("images/plaid.jpg") không lặp lại; wont hiển thị

<link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css"> 

Tôi đã thử thay đổi tệp .CSS của mình theo mọi cách có thể tưởng tượng theo ý kiến ​​của tôi. 30 kết quả đầu tiên của google cho "hình nền không hiển thị" và không có kết quả nào hoạt động. Tôi biết nó có thể là một cái gì đó đơn giản.

mystyles.css ở dạng cơ bản nhất không có bộ chọn.

background-image: url("images/plaid.jpg") no-repeat; 

index.html

<body> 
     <!-- Page: home --> 
      <div id="home" 
       data-role="page" 
       data-title="Home"> 
       <div data-role="header" 
        data-position="fixed" 
        data-theme="b"> 
        <h1>Home</h1> 
        <a href="#info" 
         data-icon="info" 
         data-iconpos="notext" 
         data-rel="dialog" 
         class="ui-btn-right" 
         >Info</a> 
       </div><!-- header --> 
       <div data-role="content"> 

       <div data-role="controlgroup" data-theme="e"> 
        <a href="#blog" 
         data-role="button" 
         data-icon="arrow-r" 
         data-theme="e" 
        >Blog</a> 
        <a href="#videos" 
         data-role="button" 
         data-icon="arrow-r" 
         data-theme="e" 
        >Videos</a> 
        <a href="#photos" 
         data-role="button" 
         data-icon="arrow-r" 
         data-theme="e" 
        >Photos</a> 
        <a href="#tweets" 
         data-role="button" 
         data-icon="arrow-r" 
         data-theme="e" 
        >Tweets</a> 
       </div><!-- links --> 
       </div> <!-- content --> 
      </div><!-- page --> 

này đã không thành công

body { 
    background-image: url("/images/plaid.jpg"); 
    background-repeat: no-repeat; 
} 

đây là whats trong cũng tôi

<head> 
    <meta charset="utf-8" /> 
    <title>Mob App</title> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

    <link rel="shortcut icon" href="images/favicon.ico" /> 

    <!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />--> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 

    <script src="javascripts/myscript.js"></script> 
    <link rel="stylesheet" type="text/css" href="stylesheets/mystyles.css" /> 
    </head> 
+1

Mọi thứ trong bảng điều khiển trình duyệt? – Wiz

+0

Nếu CSS của bạn không hoạt động, hãy kiểm tra để đảm bảo HTML * và * CSS của bạn hợp lệ. – cimmanon

+0

không có lỗi trong bảng điều khiển. và khi tôi xem nguồn, nó sẽ thấy tệp .css của tôi để nó được liên kết chính xác. –

Trả lời

14

Bạn có thể sử dụng:

background-image: url("images/plaid.jpg"); 
background-repeat: no-repeat; 

. .. hoặc

background: transparent url("images/plaid.jpg") top left no-repeat; 

... nhưng dứt khoát không

background-image: url("images/plaid.jpg") no-repeat; 

EDIT: Demo tại JSFIDDLE sử dụng đường dẫn tuyệt đối (trong trường hợp bạn có vấn đề đề cập đến hình ảnh của bạn với đường dẫn tương đối).

+0

'background-color' và' background-position' là hoàn toàn tùy chọn ('transparent' và' top left' là các giá trị cho các thuộc tính đó nếu không được chỉ định) – cimmanon

+0

@cimmanon: đồng ý. Tôi chỉ muốn minh họa cho tài sản viết tắt đầy đủ. – JFK

+0

Tôi đã cho cả hai một cảnh quay không thành công. và một poster khác nói không sử dụng url ("images/plaid.jpg") mà là url ("/ images/plaid.jpg ") Tôi đã thử những cách đó, lên tới 4 biến thể.Tôi không biết nên tin gì, tệp plaid.jpg của tôi trong thư mục hình ảnh của tôi trong thư mục gốc, hay còn gọi là index.html của tôi và tệp .css của tôi nằm trong thư mục stylesheets của tôi trong cùng thư mục gốc, do đó, nó được liên kết và nhìn thấy tệp, chỉ từ chối tuân theo bộ chọn và kiểu, tôi cũng đã thử đặt tệp plaid.jpg trong thư mục stylesheets và thay đổi đường dẫn trong tệp .css –

3

Nếu đó thực sự là tất cả những gì trong bạn Tệp CSS, sau đó có, không có gì sẽ xảy ra. Bạn cần một selector, ngay cả khi nó đơn giản như body:

body { 
    background-image: url(...); 
} 
+0

Tôi đã nói rằng những gì có trong tệp css của tôi trừ đi bộ chọn, tôi đã sử dụng mọi bộ chọn có thể. –

3

Hãy thử điều này:

body 
{ 
    background:url("images/plaid.jpg") no-repeat fixed center; 
} 

jsfiddle dụ: http://jsfiddle.net/Q9Zfa/

4

Quan trọng nhất

Hãy ghi nhớ rằng URL tương đối được giải quyết từ URL của stylesheet của bạn.

Vì vậy, nó sẽ hoạt động nếu thư mục images nằm trong thư mục stylesheets.

Từ bạn mô tả bạn sẽ cần phải thay đổi nó hoặc là

url("../images/plaid.jpg") 

hoặc

url("/images/plaid.jpg") 

bổ sung 1

Ngoài ra, bạn không thể không có selector ..

CSS được áp dụng thông qua selectors ..


bổ sung 2

Bạn nên sử dụng một trong hai cách viết tắt background để vượt qua nhiều giá trị như thế này

background: url("../images/plaid.jpg") no-repeat; 

hoặc cú pháp tiết chỉ định mỗi thuộc tính trên riêng của mình

background-image: url("../images/plaid.jpg"); 
background-repeat:no-repeat; 
+0

đã thay đổi thành hình ảnh này và nó vẫn không hoạt động {hình nền: url ("/ images/plaid.jpg"); lặp lại nền: không lặp lại; } –

+0

tôi cũng sử dụng bộ chọn Tôi chỉ không bao gồm bất kỳ bởi vì tôi đã sử dụng 15-20 và nó sẽ không quan trọng để viết ra tất cả các biến thể. cơ thể hoặc html sẽ hoạt động như một công cụ chọn ở dạng tổng quát nhất của nó nhưng tôi không biết làm thế nào nó biết kích thước của chúng là gì. Tôi cũng đặt tệp plaid.jpg bên trong thư mục stylesheets và thay đổi đường dẫn đến /stylesheets/plaid.jpg và nó cũng không hoạt động. nó sẽ không cho phép tôi chỉnh sửa bài viết trước của tôi –

+0

@codeyb khi bạn đưa ra một mẫu đặc biệt không đầy đủ, mọi người sẽ mong đợi điều tồi tệ nhất (đặc biệt là khi bạn nói * không có bộ chọn *). Chúng tôi cần đủ để biết bạn không làm điều đó hoàn toàn sai. – cimmanon

1

Bạn có thể gỡ lỗi bằng hai cách:

  1. Nhấn CTRL +U để xem trang nguồn. Nhấn CTRL + F để tìm "mystyles.css" trong nguồn. nhấp vào liên kết mystyles.css và kiểm tra xem nó có không hiển thị "404 không tìm thấy" hay không.

  2. Bạn có thể KIỂM TRA ELEMENT IN FIRBUG và đặt đường dẫn đến hình ảnh, Đặt chiều cao và chiều rộng hình ảnh vì đôi khi hình ảnh không hiển thị.

Hy vọng điều này có thể hoạt động !!.

+0

Tôi đã thử kỹ thuật đầu tiên đầu tiên và quan trọng nhất, làm cách nào để đặt chiều cao và chiều rộng img để .css sẽ chấp nhận nó? Tôi đã thử chỉnh sửa nó trong photoshop cs6. –

+0

kỹ thuật đầu tiên là để gỡ lỗi cho dù mystyles.css của bạn được bao gồm hay không với đường dẫn chính xác. bạn phải thử kỹ thuật thứ hai nhanh. Bạn có thể thiết lập đường dẫn đến hình ảnh, thiết lập chiều cao và chiều rộng hình ảnh trong frebug. –

0
<style> 
    background: url(images/Untitled-2.fw.png); 
background-repeat:no-repeat; 
background-position:center; 
background-size: cover; 
    </style> 
Các vấn đề liên quan